"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "the-backstory", "hProperties": { "id": "the-backstory" } }, "depth": 2, "value": "The backstory" }, { "data": { "id": "why-vite", "hProperties": { "id": "why-vite" } }, "depth": 3, "value": "Why Vite?" }, { "data": { "id": "the-status-quo", "hProperties": { "id": "the-status-quo" } }, "depth": 2, "value": "The status quo" }, { "data": { "id": "the-migration", "hProperties": { "id": "the-migration" } }, "depth": 2, "value": "The migration" }, { "data": { "id": "out-of-the-box-support", "hProperties": { "id": "out-of-the-box-support" } }, "depth": 3, "value": "Out-of-the-box support" }, { "data": { "id": "path-alias", "hProperties": { "id": "path-alias" } }, "depth": 3, "value": "Path alias" }, { "data": { "id": "react-fast-refresh-and-hmr", "hProperties": { "id": "react-fast-refresh-and-hmr" } }, "depth": 3, "value": "React Fast Refresh and HMR" }, { "data": { "id": "svg-as-react-component", "hProperties": { "id": "svg-as-react-component" } }, "depth": 3, "value": "SVG as React component" }, { "data": { "id": "sass-modules", "hProperties": { "id": "sass-modules" } }, "depth": 3, "value": "SASS modules" }, { "data": { "id": "mdx-support", "hProperties": { "id": "mdx-support" } }, "depth": 3, "value": "MDX support" }, { "data": { "id": "mermaid-support-within-mdx", "hProperties": { "id": "mermaid-support-within-mdx" } }, "depth": 3, "value": "Mermaid support within MDX" }, { "data": { "id": "lazy-loading", "hProperties": { "id": "lazy-loading" } }, "depth": 3, "value": "Lazy loading" }, { "data": { "id": "compression", "hProperties": { "id": "compression" } }, "depth": 3, "value": "Compression" }, { "data": { "id": "manual-chunks", "hProperties": { "id": "manual-chunks" } }, "depth": 3, "value": "Manual chunks" }, { "data": { "id": "dev-server", "hProperties": { "id": "dev-server" } }, "depth": 3, "value": "Dev server" }, { "data": { "id": "environment-variables", "hProperties": { "id": "environment-variables" } }, "depth": 3, "value": "Environment variables" }, { "data": { "id": "conslusion", "hProperties": { "id": "conslusion" } }, "depth": 2, "value": "Conslusion" }]; const readingTime = { "minutes": 7, "words": 2186, "text": "7 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx("style", { children: `.alt { font-size: 1rem; font-style: italic; font-weight: 500; color: #888; margin-top: 1rem; display: 'block'; }` }), "\n", _jsxs(_components.h2, { id: "the-backstory", children: ["The backstory", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-backstory", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We have three main frontend projects at Logto: the sign-in experience, the Console, and the live preview. These projects are all in TypeScript, React, and SASS modules; in total, they have around 100K lines of code." }), "\n", _jsxs(_components.p, { children: ["We loved Parcel for its simplicity and zero-config setup. I can still remember the day when I was shocked by how easy it was to set up a new project with Parcel. You can just run ", _jsx(_components.code, { children: "parcel index.html" }), " and boom, all necessary dependencies are installed and the project is running. If you are an \"experienced\" developer, you may feel the same way comparing it to the old days of setting up with Gulp and Webpack. Parcel is like a magic wand."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "The simplicity of Parcel was the main reason we stuck with it for so long, even though it could be moody sometimes. For example:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel sometimes failed to bundle the project because it couldn't find some chunk files that were actually there." }), "\n", _jsx(_components.li, { children: "It needed some hacky configurations to make it work with our monorepo setup." }), "\n", _jsx(_components.li, { children: "It doesn't support MDX 3 natively, so we had to create a custom transformer for it." }), "\n", _jsxs(_components.li, { children: ["It doesn't support manual chunks (as of the time of writing, the manual chunks feature is still ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "in the experimental stage" }), "), which is okay for most circumstances, but sometimes you need it."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "So why did we decide to migrate to something else?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "We were stuck with Parcel 2.9.3, which was released in June 2023. Every time a new version was released after that, we tried to upgrade, but it always failed with build errors." }), "\n", _jsx(_components.li, { children: "The latest version of Parcel was 2.12.0, released in February 2024. Although it has nearly daily commits, no new release has been made since then." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Someone even opened a discussion to ask ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "if Parcel is dead" }), ". The official answer is no, Parcel is still alive, but it's in a we-are-working-on-a-large-refactor-and-no-time-for-minor-releases state. To us, it's like a \"duck death\": The latest version we can use is from more than a year ago, and we don't know when the next version will be released. It looks like it's dead, it acts like it's dead, so it's dead to us."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Parcel upgrade pull requests" }) }), "\n", _jsx("center", { className: "alt", children: "Trust me, we've tried." }), "\n", _jsxs(_components.h3, { id: "why-vite", children: ["Why Vite?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#why-vite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["We knew ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " from ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". Several months ago, we were tired of Jest's ESM support (in testing) and wanted to try something new. Vitest won our hearts with the native ESM support and the Jest compatibility. It has an amazing developer experience, and it's powered by Vite."] }), "\n", _jsxs(_components.h2, { id: "the-status-quo", children: ["The status quo", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-status-quo", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "You may have different settings in your project, but usually you will find plugin replacements as the Vite ecosystem is blooming. Here are our setups at the moment of migration:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " We use PNPM (v9) workspaces to manage our monorepo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Module:" }), " We use ESM modules for all our projects."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " We use TypeScript (v5.5.3) for all our projects with path aliases."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " We use React (v18.3.1) for all our frontend projects."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Styling:" }), " We use SASS modules for styling."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " We use SVGs as React components."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " We have MDX with GitHub Flavored Markdown and Mermaid support."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lazy loading:" }), " We need to lazy load some of our pages and components."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compression:" }), " We produce compressed assets (gzip and brotli) for our production builds."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "the-migration", children: ["The migration", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-migration", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We started the migration by creating a new Vite project and playing around with it to see how it works. The process was smooth and the real migration only took a few days." }), "\n", _jsxs(_components.h3, { id: "out-of-the-box-support", children: ["Out-of-the-box support", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#out-of-the-box-support", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vite has out-of-the-box support for monorepo, ESM, TypeScript, React, and SASS. We only needed to install the necessary plugins and configurations to make it work." }), "\n", _jsxs(_components.h3, { id: "path-alias", children: ["Path alias", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#path-alias", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Vite has built-in support for path aliases, for example, in our ", _jsx(_components.code, { children: "tsconfig.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"src/*\"]\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["We only needed to add the same resolution in our ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Note the replacement path should be an absolute path, while it is relative to the project root. Alternatively, you can use the ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " plugin to read the path aliases from the ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-and-hmr", children: ["React Fast Refresh and HMR", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-and-hmr", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Although Vite has built-in support for HMR, it is required to install a plugin to enable React Fast Refresh. We used the ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " plugin which is provided by the Vite team and has great support for React features like Fast Refresh:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "svg-as-react-component", children: ["SVG as React component", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-as-react-component", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["We use the ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " plugin to convert SVGs to React components. It's as simple as adding the plugin to the Vite config:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport svgr from 'vite-plugin-svgr';\n\nexport default defineConfig({\n plugins: [svgr()],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["However, we didn't specify on which condition the SVGs should be converted to React components, so all the imports were converted. The plugin offers a better default configuration: only convert the SVGs that are imported with the ", _jsx(_components.code, { children: ".svg?react" }), " extension. We updated our imports accordingly."] }), "\n", _jsxs(_components.h3, { id: "sass-modules", children: ["SASS modules", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-modules", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Although Vite has built-in support for SASS modules, there's one thing we need to care about: how the class names are formatted. It may be troublesome for users and our integration tests if the class names are not formatted consistently. The one-line configuration in the ", _jsx(_components.code, { children: "vite.config.ts" }), " can solve the problem:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]', // Replace with your own format\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Bt the way, Parcel and Vite have different flavors of importing SASS files:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-diff", children: "- import * as styles from './index.module.scss';\n+ import styles from './index.module.scss';\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "* as" }), " syntax, however, works in Vite, but it will cause the loss of modularized class names when you use dynamic keys to access the ", _jsx(_components.code, { children: "styles" }), " object. For example:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// This will not work as expecteds\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-support", children: ["MDX support", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-support", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Since Vite leverages Rollup under the hood, we can use the official ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " plugin to support MDX as well as its plugins. The configuration looks like this:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\n\nexport default defineConfig({\n plugins: [\n {\n // The `enforce: 'pre'` is required to make the MDX plugin work\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n ],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "remarkGfm" }), " plugin is used to support GitHub Flavored Markdown, and the ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " plugin is used to pass the props to the code blocks in the MDX files like what ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus does" }), "."] }), "\n", _jsxs(_components.h3, { id: "mermaid-support-within-mdx", children: ["Mermaid support within MDX", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mermaid-support-within-mdx", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We would like to use Mermaid diagrams in our MDX files as other programming languages. The usage should be as simple as other code blocks:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "```mermaid\ngraph TD\n A-->B\n A-->C\n B-->D\n C-->D\n```\n" }) }), "\n", _jsx(_components.p, { children: "Should be rendered as:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph TD\n A-->B\n A-->C\n B-->D\n C-->D\n" }) }), "\n", _jsx(_components.p, { children: "Since our app supports light and dark themes, we coded a little bit to make the Mermaid diagrams work with the dark theme. A React component is created:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Maybe defined elsewhere\nenum Theme {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype Props = {\n readonly children: string;\n};\n\nconst themeToMermaidTheme = Object.freeze({\n [Theme.Dark]: 'dark',\n [Theme.Light]: 'default',\n} satisfies Record);\n\nexport default function Mermaid({ children }: Props) {\n const theme = useTheme();\n\n useEffect(() => {\n (async () => {\n const { default: mermaid } = await import('mermaid');\n\n mermaid.initialize({\n startOnLoad: false,\n theme: themeToMermaidTheme[theme],\n securityLevel: 'loose',\n });\n await mermaid.run();\n })();\n }, [theme]);\n\n return

{children}

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useTheme" }), " is a custom hook to get the current theme from the context. The ", _jsx(_components.code, { children: "mermaid" }), " library is imported asynchronously to reduce the loading size for the initial page load."] }), "\n", _jsx(_components.p, { children: "For the code block in the MDX file, we have a unified component to do the job:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import CodeEditor from '@/components/CodeEditor';\nimport Mermaid from '@/components/Mermaid';\n\ntype Props = {\n readonly children: string;\n readonly className?: string;\n};\n\nexport default function Code({ children, className }: Props) {\n const [, language] = /language-(\\w+)/.exec(String(className ?? '')) ?? [];\n\n if (language === 'mermaid') {\n return {String(children).trimEnd()};\n }\n\n // Other code blocks go here\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Finally we define the MDX provider as follows:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { MDXProvider } from '@mdx-js/react';\nimport { ReactNode } from 'react';\n\ntype Props = {\n readonly children: ReactNode;\n};\n\nexport default function MdxProvider({ children }: Props) {\n return (\n ` cannot be swapped out with a\n // custom component now.\n // See: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...other components\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "lazy-loading", children: ["Lazy loading", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lazy-loading", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "This isn't a Vite-specific thing, it's still worth mentioning since we updated our pages to use lazy loading during the migration, and nothing broke afterward." }), "\n", _jsxs(_components.p, { children: ["React has a built-in ", _jsx(_components.code, { children: "React.lazy" }), " function to lazy load components. However, it may cause some issues when you are iterating fast. We crafted a tiny library called ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " to solve the issues. It's a drop-in replacement for ", _jsx(_components.code, { children: "React.lazy" }), " and a detailed explanation can be found in this ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "blog post" }), "."] }), "\n", _jsxs(_components.h3, { id: "compression", children: ["Compression", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#compression", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["There's a neat plugin called ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " to produce compressed assets. It supports both gzip and brotli compression. The configuration is simple:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n plugins: [\n // Gzip by default\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manual-chunks", children: ["Manual chunks", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manual-chunks", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["One great feature of Vite (or the underlying Rollup) is the manual chunks. While ", _jsx(_components.code, { children: "React.lazy" }), " is used for lazy loading components, we can have more control over the chunks by specifying the manual chunks to decide which components or modules should be bundled together."] }), "\n", _jsxs(_components.p, { children: ["For example, we can first use ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " to analyze the bundle size and dependencies. Then we can write a proper function to split the chunks:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Dynamically check if the module has React-related dependencies\n const hasReactDependency = (id: string): boolean => {\n return (\n getModuleInfo(id)?.importedIds.some(\n (importedId) => importedId.includes('react') || importedId.includes('react-dom')\n ) ?? false\n );\n };\n\n // Caution: React-related packages should be bundled together otherwise it may cause runtime errors\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Add your large packages to the list\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // All other packages in the `node_modules` folder will be bundled together\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Use the default behavior for other modules\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "dev-server", children: ["Dev server", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dev-server", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Unlike the production build, Vite will NOT bundle your source code in the dev mode (including linked dependencies in the same monorepo) and treat every module as a file. For us, the browser will load hundreds of modules for the first time, which looks crazy but it's actually fine in most cases. You can see the discussion ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "here" }), "."] }), "\n", _jsxs(_components.p, { children: ["If it's a thing for you, an alternative-but-not-perfect solution is to list the linked dependencies in the ", _jsx(_components.code, { children: "optimizeDeps" }), " option of the ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n optimizeDeps: {\n include: ['@logto/phrases', '@logto/schemas'],\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "This will \"pre-bundle\" the linked dependencies and make the dev server faster. The pitfall is that HMR may not work as expected for the linked dependencies." }), "\n", _jsxs(_components.p, { children: ["Additionally, we use a proxy which serves the static files in production and proxies the requests to the Vitest server in development. We have some specific ports configured to avoid conflicts, and it's also easy to set up in the ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "environment-variables", children: ["Environment variables", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#environment-variables", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Unlike Parcel, Vite uses a modern approach to handle environment variables by using ", _jsx(_components.code, { children: "import.meta.env" }), ". It will automatically load the ", _jsx(_components.code, { children: ".env" }), " files and replace the variables in the code. However, it requires all the environment variables to be prefixed with ", _jsx(_components.code, { children: "VITE_" }), " (configurable)."] }), "\n", _jsxs(_components.p, { children: ["While we were using Parcel, it simply replaced the ", _jsx(_components.code, { children: "process.env" }), " variables without checking the prefix. So we have come up with a workaround using the ", _jsx(_components.code, { children: "define" }), " field to make the migration easier:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n define: {\n 'import.meta.env.API_URL': JSON.stringify(process.env.API_URL),\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["This allows us to gradually add the prefix to the environment variables and remove the ", _jsx(_components.code, { children: "define" }), " field."] }), "\n", _jsxs(_components.h2, { id: "conslusion", children: ["Conslusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conslusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "That's it! We've successfully migrated our three frontend projects from Parcel to Vite, and hope this short story can help you with your migration. Here's what the configuration looks like in the end:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport svgr from 'vite-plugin-svgr';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n plugins: [\n react(),\n svgr(),\n {\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n viteCompression(),\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]',\n },\n },\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Manual chunks logic\n },\n },\n },\n});\n" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };