DEV Community

Willyams Yujra
Willyams Yujra

Posted on • Updated on

Use Remix with Vite (vite-plugin-remix)


In this tutorial, we will explore how to use the vite-plugin-remix plugin to integrate the Remix Framework into a Vite project. By using this plugin, we can leverage the benefits of both Vite and Remix, including web module imports and Hot Module Replacement (HRM) functionalities.


Before we begin, make sure you have the following:

  • Basic knowledge of ViteJS and Remix Framework.
  • An existing Vite project.

Step 1: Installation

First, we need to install the vite-plugin-remix package and its dependencies. Run the following command in your project directory:

yarn add -D vite-plugin-remix
Enter fullscreen mode Exit fullscreen mode

Additionally, install the required Remix dependencies:

yarn add @remix-run/react
yarn add -D @remix-run/dev @remix-run/express @remix-run/server-runtime
Enter fullscreen mode Exit fullscreen mode

Step 2: Configuration

In your Vite project, open the vite.config.ts file and add the following code:

// Vite Remix Plugin Config
import { defineConfig } from "vite";
import { remixPlugin } from "vite-plugin-remix";
export default defineConfig({
  plugins: [
    // Remix Vite Plugin
      appDirectory: "src",
      future: {
         // unstable_dev: false,
         // unstable_postcss: false,
         // unstable_tailwind: false,
         // v2_errorBoundary: false,
         v2_meta: true,
         // v2_normalizeFormMethod: false,
         // v2_routeConvention: false,
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Request Handler

To use vite-plugin-remix, we need to configure a request handler. Create a handler.ts file in your ${appDirectory} (e.g., src/handler.ts) and add the following code:

import { createRequestHandler } from "@remix-run/express";
import express from "express";
// Remix Vite
import { build } from "@remix-vite/serverBuild";
let requestHandler = createRequestHandler({
  mode: "production",
export const handler = express();
const onRender = async (req, res, next) => {
  try {
    req.url = req.originalUrl; // Fix for supporting base path deployment on the server
    await requestHandler(req, res, next);
  } catch (error) {
handler.get("*", onRender);
Enter fullscreen mode Exit fullscreen mode

Step 4: Configure LiveReload

In your root file (e.g., src/root.tsx), you need to import the LiveReload component from @remix-vite/ui and include it in your HTML structure. Here's an example:

import { LiveReload, Welcome } from "@remix-vite/ui";
import {
} from "@remix-run/react";
const Root = () => {
  return (
    <html lang="en">
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <LiveReload /> {/* Placed at the top of the page */}
        <Meta />
        <Links />
        <Welcome />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
export default Root;
Enter fullscreen mode Exit fullscreen mode

Step 5: Create a basic file route Remix

To create a basic file route, follow these steps:

  • Open your project's /src/routes directory.

  • Create a new file named index.jsx (or index.tsx if you're using TypeScript) in the /src/routes directory.

  • Inside the index.jsx file, add the following code to create a basic page:

import { Link } from "react-router-dom";

export const meta = () => {
 return [
    { title: "My first page" },
    { name: "description", content: "REMIX in VITEJS" },

export default function Index() {
  return (
    <div className="card w-50 m-auto mt-5">
      <div className="card-header">
        <h1>Mollit fugiat aliquip sunt adipisicing qui non veniam deserunt.</h1>
      <div className="card-body">
          Sunt veniam nisi sunt Lorem tempor exercitation cupidatat est. Esse eu
          ipsum adipisicing fugiat do culpa labore sint aute occaecat. Nulla
          excepteur esse labore exercitation laboris minim proident aliqua
        <Link to="./app">App</Link>
Enter fullscreen mode Exit fullscreen mode

Step 6: Run the App

To run your Vite app with Remix integration, use the Vite development server:

yarn run dev
Enter fullscreen mode Exit fullscreen mode


Congratulations! You have successfully integrated the Remix Framework into your ViteJS project using the vite-plugin-remix plugin. This allows you to take advantage of both Vite and Remix features while developing your application.
Feel free to explore the example project provided in the "example" folder for a practical implementation.

Remember to refer to the plugin's documentation for more advanced configuration options and optimizations.
Happy coding!

You can see the full example in:

Top comments (0)