How to deploy Remix Vite to Netlify

#TL;DR

Remix v2.7.0 now has stable support for Vite, with a faster and more reliable development experience, and we’re excited to announce that this is now fully supported on Netlify. Our new Vite-based Remix adapters and templates are available today for both Netlify Functions and Edge Functions.

#Why Vite?

Vite is the leading build and development tool for web frameworks, and is well loved for its excellent developer experience, speedy performance, and the huge ecosystem of plugins. There’s a reason that almost all modern web frameworks now use it.

In October 2023, the Remix team announced that they were joining this growing community, previewing unstable support in Remix v2.2.0. After several months of furious development, the team has released stable support for Vite in Remix v2.7.0. It is now the recommended way to build all Remix sites.

#Come on in, the water’s lovely!

For all these reasons and more, it’s a great time to start moving your site to use Vite. Here’s how to get started.

To create a new Remix Vite site on Netlify, you just need to run one command:

npx create-remix@latest --template netlify/remix-template

You can then choose whether you would like to deploy to Netlify Functions (Node-based, deployed to one region) or Netlify Edge Functions (Deno-based, deployed to a global edge network). Your site is then ready to deploy to Netlify.

#Migrating an existing Remix site to Vite

If you have an existing Remix site on Netlify, there are a few steps needed if you want to migrate. The project structure for Netlify Functions and Netlify Edge Functions are now almost identical, but the steps to upgrade are slightly different.

#Netlify Functions

1. First, follow the migration steps in the Remix docs , including updating versions and installing Vite.
2. Upgrade @netlify/remix-adapter
3. Replace your remix.config.js with this vite.config.ts:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { netlifyPlugin } from "@netlify/remix-adapter/plugin";

export default defineConfig({
  plugins: [remix(), netlifyPlugin(), tsconfigPaths()],
});

4. Delete server.ts and app/entry.server.tsx from your site
5. Change your package.json scripts to match these:

{
  "build": "remix vite:build",
  "dev": "remix vite:dev",
  "start": "netlify serve"
}

6. Change your netlify.toml to match this:

[build]
command = "npm run build"
publish = "build/client"

[dev]
command = "npm run dev"
framework = "vite"

#Netlify Edge Functions

1. First, follow the migration steps in the Remix docs , including updating versions and installing Vite.
2. Upgrade @netlify/remix-edge-adapter and @netlify/remix-runtime
3. Replace your remix.config.js with this vite.config.ts:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";

export default defineConfig({
  plugins: [remix(), netlifyPlugin(), tsconfigPaths()],
});

4. Delete server.ts from your site
5. Replace your app/server.entry.tsx with this:

// @ts-expect-error virtual module
// eslint-disable-next-line import/no-unresolved
export { default } from "virtual:netlify-server-entry";

6. Change your package.json scripts to match these:

{
  "build": "remix vite:build",
  "dev": "remix vite:dev",
  "start": "netlify serve"
}

7. Change your netlify.toml to match this:

[build]
command = "npm run build"
publish = "build/client"

[dev]
command = "npm run dev"
framework = "vite"

Happy Remixing!

#More resources

For more information on building with the technologies in this article:

• Remix on Netlify - in the Netlify docs
• Vite - in the Remix docs
• Remix Vite is Now Stable - in the Remix blog