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-remixDependencies
This plugin requires some dependencies to work properly:
yarn add -D @remix-run/react @remix-run/dev @remix-run/express @remix-run/server-runtimeConfiguration
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;Run
To run the app, use the Vite flow:
yarn run devExample
Check out the example project in the "example" folder.
TO DO
- Build Project with Plugin
- Optimize Source Code