Remix on Netlify

Remix gives you a server and browser runtime that focuses on performance and excellent user experiences. With Remix, you get a number of built-in tools to build better websites, such as nested routes, parallel data requests, and robust built-in error handling.

Key features

These features provide important benefits for Remix projects, including those built by and deployed with Netlify.

• Nested routes. By default, Remix creates routes for components that serve as boundaries for data loading and code splitting.
• Parallel data requests by default. Instead of waiting on sequential requests, Remix processes requests in parallel and then sends a complete HTML document.
• Built-in global error handling. Remix has built-in error handling for server and client rendering and server side data handling. Error boundaries don’t block the entire page from rendering, only the affected component.

Netlify integration

You can create a Remix app and deploy it on Netlify using the Netlify starter template for Remix with the command npx create-remix@latest --template netlify/remix-template. This template automatically creates everything you need to deploy to Netlify — including a pre-configured netlify.toml file with typical build settings.

Create a new Remix app to deploy to Netlify

You can use the command line to scaffold a new project based on the Netlify starter template for Remix. This can streamline the process of getting your project up and running.

1. In your terminal, run npx create-remix@latest --template netlify/remix-template.
2. Choose where you want to create your project.
3. Decide whether you want to use TypeScript or JavaScript.
4. Enter Y to have create-remix run npm install for your project.
5. Choose whether you want to run your app with functions or edge functions.
6. Follow the starter template README to get your project running.

Update the deploy target for an existing Remix app

If you have an existing Remix project that isn’t deployed on Netlify and you want to change the deploy target to Netlify, you need to create a new Remix project.

1. Create a new Remix project with Netlify as the deploy target.
2. Replace the new project’s app directory with the app directory from your old project.

Manual configuration

Alternatively, you can configure this manually.

First, ensure you’re using Remix Vite. If not, follow this guide.

Then, install Netlify’s Remix adapter and add its Vite plugin to your Vite config:

npm install --save-dev @netlify/remix-adapter

vite.config.ts

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

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

vite.config.js

import { vitePlugin as remix } from "@remix-run/dev";
// ↓ add this
import { netlifyPlugin } from "@netlify/remix-adapter/plugin";

export default {
  plugins: [
    remix(),
    netlifyPlugin() // ← add this
  ]
};

Edge Functions

Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools, including Remix.

To take advantage of Netlify Edge Functions with Remix, follow the steps above to create a new Remix app to deploy on Netlify. When the CLI prompts you to select the type of functions to run your Remix app with, select Netlify Edge Functions.

More resources

• Typical Remix build settings
• Netlify starter template for Remix
• Deploy Remix to Netlify
• Developer guide: build a high-performance Remix image component with Unpic and Netlify Image CDN
• Remix docs about HTTP handlers and adapters