Vite-plugin-remix NPM

vite-plugin-remix

Welcome Remix to ViteJS!

Motivation

I wanted to use the Remix Framework within the ViteJS environment, while keeping the web module imports and HRM (Hot Module Replacement) functionalities. RemixJS comes with a custom server, but this plugin allows you to use the Vite server during development.

Installation

yarn add -D vite-plugin-remix

Dependencies

This plugin requires some dependencies to work properly:

yarn add -D @remix-run/react @remix-run/dev @remix-run/express @remix-run/server-runtime

Configuration

In your vite.config.ts file:

import { defineConfig } from "vite";
import remixPlugin from "vite-plugin-remix";
export default defineConfig({
  plugins: [
    remixPlugin({
      // appDirectory?: "src",
      // cacheDirectory?: ".remix",
      // future: {
      //    v2_dev: false,
      //    unstable_postcss: false,
      //    unstable_tailwind: false,
      //    v2_errorBoundary: false,
      //    v2_headers: false,
      //    v2_meta: true,
      //    v2_normalizeFormMethod: false,
      //    v2_routeConvention: false,
      // },
    }),
  ],
});

Note cacheDirectory = ".remix" in the application root, allows code to be updated automatically.

Configure Request Handler

This plugin requires a request handler. Create a handler.ts file in ${appDirectory} (e.g., src/handler.ts):

import { createRequestHandler } from "@remix-run/express";
import express from "express";
// Custom File from vite-plugin-remix
import { build } from "@remix-vite/serverBuild";
let requestHandler = createRequestHandler({
  build,
  mode: "production",
});
export const handler = express();
const onRender = async (req, res, next) => {
  try {
    // This FIX is for supporting the base path deployment on the server
    req.url = req.originalUrl;
    await requestHandler(req, res, next);
  } catch (error) {
    next(error);
  }
};
handler.get("*", onRender);
// TODO: export const run = ()=>{ /*custom server for production*/}

Configure LiveReload

In your root.tsx file (e.g., src/root.tsx), you need to use the LiveReload component from @remix-vite/ui:

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