Use Remix with Vite (vite-plugin-remix)
Tags: remix, vite, react, webpack
Published: 2023-06-01 17:17:42


### 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:

```bash
yarn add -D vite-plugin-remix
```

Additionally, install the required Remix dependencies:

```bash
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:

```js
// 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:

```js
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:

```js
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:


```js
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:

```bash
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