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

When you create a Remix app with npx create-remix@latest and choose Netlify as a deployment target, you’re using the Netlify starter template and adapter for Remix. 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.
  2. Choose where you want to create your project.
  3. For the type of app, select Just the basics.
  4. For a deployment target, select Netlify.
  5. If desired, have create-remix run npm install for your project.
  6. Decide whether you want to use TypeScript or JavaScript.
  7. 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.

# Edge Functions

This feature is in BETA.

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 Edge Functions with Remix, use npx create-remix --template netlify/remix-edge-template to create your Remix project. This will scaffold a new project with an Edge Functions starter template.

You can browse a full library of reference examples for different ways to use Edge Functions. For more details, check out the Edge Functions documentation.

# More resources