This repository was archived by the owner on Dec 16, 2024. It is now read-only.
File tree Expand file tree Collapse file tree
docs/02-guides/extend-vite-configuration Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ ---
2+ title : Remix Development Tools
3+ description :
4+ This guide explains how to setup Remix Development Tools in your
5+ Front-Commerce application thanks to Vite.
6+ ---
7+
8+ <p >{ frontMatter .description } </p >
9+
10+ Since Front-Commerce is based on Remix, you can use any related Remix extension
11+ to enhance your development experience and your project.
12+
13+ In this guide, we will guide you through the setup of
14+ [ Remix Development Tools] ( https://remix-development-tools.fly.dev/ ) .
15+
16+ :::tip
17+
18+ Remix Development Tools isn't affiliated with Front-Commerce. Since we use it to
19+ work on Front-Commerce, we decided to share it with you to enhance your
20+ experience too!
21+
22+ :::
23+
24+ ## Quick start
25+
26+ ### Install the extension
27+
28+ ``` sh
29+ pnpm add --save-dev remix-development-tools
30+ ```
31+
32+ ### Add the extension to your ` vite.config.ts `
33+
34+ ** Please note that ` remixDevTools ` plugin must be declared before the
35+ ` frontCommerce ` plugin**
36+
37+ ``` diff
38+ import { defineConfig } from "vite";
39+ import { vitePlugin as frontCommerce } from "@front-commerce/remix/vite";
40+ + import { remixDevTools } from "remix-development-tools";
41+
42+ export default defineConfig((env) => {
43+ return {
44+ plugins: [
45+ + remixDevTools({
46+ + client: {
47+ + defaultOpen: false,
48+ + },
49+ + }),
50+ frontCommerce({ env })
51+ ],
52+ };
53+ });
54+ ```
You can’t perform that action at this time.
0 commit comments