Introduction
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.
Prerequisites
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
Additionally, install the required Remix dependencies:
yarn add @remix-run/react
yarn add -D @remix-run/dev @remix-run/express @remix-run/server-runtime
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
remixPlugin({
appDirectory: "src",
future: {
// unstable_dev: false,
// unstable_postcss: false,
// unstable_tailwind: false,
// v2_errorBoundary: false,
v2_meta: true,
// v2_normalizeFormMethod: false,
// v2_routeConvention: false,
},
}),
],
});
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({
build,
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) {
next(error);
}
};
handler.get("*", onRender);
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 {
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;
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>
<div className="card-body">
<p>
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
tempor.
</p>
<Link to="./app">App</Link>
</div>
</div>
);
}
Step 6: Run the App
To run your Vite app with Remix integration, use the Vite development server:
yarn run dev
Conclusion
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: https://github.com/yracnet/vite-plugin-remix
Top comments (0)