Intermediate12 minutesUpdated 2026-03-01

Remix is a full-stack React framework that emphasizes web standards and progressive enhancement. On Netlify, Remix runs as serverless functions, giving you full SSR, form handling, and data loading with the scalability of serverless. The @netlify/remix-adapter handles all the wiring automatically.

Prerequisites

Node.js 18 or later installed
A Remix project
A Netlify account
Git repository (GitHub, GitLab, or Bitbucket)

Step 1: Install the Netlify adapter

Add the @netlify/remix-adapter package to your project. This adapter compiles your Remix app into Netlify Functions.

npm install @netlify/remix-adapter

Step 2: Configure Vite for Netlify

Remix uses Vite as its bundler. Update your vite.config.ts to use the Netlify adapter.

vite.config.ts

import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import { netlifyPlugin } from '@netlify/remix-adapter/plugin'

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

Step 3: Push to Git and import in Netlify

Push your Remix project to your Git provider. In Netlify, import the project — it will detect Remix and configure the build settings.

Build settings

Build command: remix vite:build
Publish directory: build/client

Step 4: Add environment variables

Remix loaders and actions run on the server, so all environment variables are available server-side. Add them in Netlify's dashboard under Site settings > Environment variables.

Step 5: Deploy and test

Deploy your site. Remix routes that use loaders or actions will run as Netlify Functions. Static assets are served from the CDN. Test form submissions and data loading to verify everything works.

Use Netlify's function logs to debug any server-side issues with your Remix loaders and actions.

netlify.toml Configuration

Remix builds the client assets to build/client and the server code to build/server. The Netlify adapter automatically handles the server deployment as Netlify Functions.

netlify.toml

[build]
  command = "remix vite:build"
  publish = "build/client"

Common Errors

Error: @netlify/remix-adapter not found

Cause: The adapter isn't installed or is listed in devDependencies when it should be in dependencies.

Fix: Run 'npm install @netlify/remix-adapter' and ensure it's in your dependencies (not devDependencies).

Function invocation timeout

Cause: A Remix loader or action is taking too long, exceeding Netlify Functions' default 10-second timeout.

Fix: Optimize your data fetching in loaders. Use streaming with defer() for slow data sources. You can also increase the function timeout in netlify.toml.

404 on client-side navigation

Cause: The Netlify _redirects or netlify.toml isn't configured to handle Remix's client-side routing.

Fix: The @netlify/remix-adapter handles this automatically. If you see this error, make sure you're using the latest version of the adapter.

Pro Tips

Use Remix's defer() with streaming to improve perceived performance on Netlify — the shell renders immediately while slow data loads in the background.

Remix's form handling works perfectly with Netlify. Forms submit to your Remix actions with full progressive enhancement.

Use Netlify's deploy previews to test Remix changes. Each preview runs its own set of serverless functions.

Monitor your Remix function execution times in the Netli.fyi app to catch performance regressions early.

Consider using Netlify Edge Functions for latency-sensitive Remix routes — they run at the edge, closer to your users.

Deploy Remix to Netlify