How to Setup Vite in Shopify Remix App?

In this article, we will learn how to set up Vite in the Shopify remix app.

Vite in Remix refers to using the Vite build tool with the Remix framework. Remix traditionally uses Webpack or its own default build system, but Vite can be used as an alternative bundler to improve build speed and development experience.

Vite is a next-generation frontend build tool that offers fast development by using native ES modules for serving code during development and an efficient bundling process using Rollup for production builds.

Vite is a fast and modern build tool for front-end development. It provides an out-of-the-box development experience, offering hot module replacement (HMR), pre-bundling, and more to enhance the workflow. If you’re developing a Shopify app using Remix, integrating Vite can significantly improve performance during development. This guide will walk you through the steps required to set up Vite in your Shopify Remix App.

Contents

1 Benefits of using Vite in Remix:
2 How to Install Vite?
3 Conclusion:

Benefits of using Vite in Remix:

Faster development builds: Vite offers almost instant server start time and fast updates thanks to its module-based Hot Module Replacement (HMR).
Better DX (Developer Experience): With faster reloads and improved error overlays, developers can build faster with fewer interruptions.
Modern features: Vite has support for modern JavaScript, TypeScript, JSX, and CSS out of the box.

To use Vite with Remix, there may be plugins or configurations required to ensure proper integration.

How to Install Vite?

Use the following command to install Vite in the current remix app.

npm install -D vite

Remix is now just a Vite plugin, so you’ll need to hook it up to Vite. Replace remix.config.js with vite.config.ts at the root of your Remix app. The subset of supported Remix config options should be passed directly to the plugin:

// vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
     remix({
         ignoredRouteFiles: ["**/*.css"],
    }),
  ],
});

HMR & HDR:

Vite provides a robust client-side runtime for development features like HMR, making the <LiveReload /> component obsolete. When using the Remix Vite plugin in development, the <Scripts /> component will automatically include Vite’s client-side runtime and other dev-only scripts.

//root.jsx

 import {
-   LiveReload,
    Outlet,
    Scripts,
  }

  export default function App() {
    return (
      <html>
        <head>
        </head>
        <body>
          <Outlet />
-         <LiveReload />
          <Scripts />
        </body>
      </html>
    )
  }

Conclusion:

Integrating Vite into your Shopify Remix app is a powerful way to supercharge your development experience. With its fast development server, HMR, and efficient bundling, Vite ensures you can build Shopify apps with better performance and ease.

By following this guide, you’ve successfully set up Vite in your Shopify Remix app. Now, you can take full advantage of its capabilities to develop faster and more efficiently.

Happy Coding!

Click to rate this post!

[Total: 0 Average: 0]

Bharat Desai

Bharat Desai is a Co-Founder at MageComp. He is an Adobe Magento Certified Frontend Developer ? with having 8+ Years of experience and has developed 150+ Magento 2 Products with MageComp. He has an unquenchable thirst to learn new things. On off days you can find him playing the game of Chess ♟️ or Cricket ?.