Remix Deployment — Production Hosting and CI/CD

In this tutorial, you will learn about Remix Deployment. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Remix deployment: deploy to Vercel, Netlify, Fly.io, or Node.js servers with adapters, environment config, and CI/CD pipelines for production.

In this lesson, you'll configure deployment adapters, build for production, set up environment variables, and deploy to popular hosting platforms.

What You'll Learn

How to configure deployment adapters, build for production, deploy to Vercel/Netlify/Fly.io, set up CI/CD, and manage production environment variables.

Why It Matters

Proper deployment makes your app accessible, scalable, and automatically updated. Each platform has specific requirements that adapters handle.

Real-World Use

DodaZIP deploys to Fly.io with the Node.js adapter for full control over the server environment and scaling.

flowchart LR
    A[Git Push] --> B[CI Build]
    B --> C[Adapter Config]
    C --> D[Deploy to Host]
    D --> E[Production App]
    style C fill:#121212,color:#fff

Vercel Deployment

Use the Vercel adapter:

npm install @remix-run/vercel

// remix.config.js
module.exports = {
  serverModuleFormat: "cjs",
};

Connect your Git repository to Vercel. Set build command to npm run build and output directory to public.

Netlify Deployment

npm install @remix-run/netlify

// remix.config.js
module.exports = {
  serverBuildTarget: "netlify",
};

Fly.io Deployment

npm install @remix-run/node

// remix.config.js
module.exports = {
  serverBuildTarget: "node-cjs",
};

Create a Dockerfile or use Fly's Node.js builder.

Node.js Server

// remix.config.js
module.exports = {
  serverBuildTarget: "node-cjs",
  server: "./server.js",
};

Create server.js:

const { createRequestHandler } = require("@remix-run/architect");
const app = require("express")();

app.all("*", createRequestHandler({
  build: require("./build"),
}));

app.listen(3000);

CI/CD with GitHub Actions

name: Deploy
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - uses: superfly/flyctl-actions@1.3
        with:
          args: "deploy"
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Common Mistakes

1. Not using the correct adapter: Each platform needs a specific build target. Using the wrong one causes deployment failures.
2. Forgetting to set environment variables: Set all required vars in the hosting platform's dashboard before deployment.
3. Building with dev dependencies installed: Run npm ci --production or ensure dev dependencies aren't included in the production build.
4. Not handling asset caching: Static assets should have cache headers. Configure CDN caching for better performance.
5. Ignoring build errors: Check the build output for warnings and errors. A successful build may still have issues.

Practice Questions

1. What does a deployment adapter do? Answer: It configures Remix's build output for a specific hosting platform, handling server entry point, request handling, and deployment format.

2. How do you set environment variables in production? Answer: In the hosting platform's dashboard or CLI. Never hardcode secrets in the codebase.

3. What is the default build target? Answer: node-cjs for Node.js servers. Other targets include vercel, netlify, <a href="/web-servers-hosting/cloudflare/">Cloudflare</a>-pages, and cloudflare-workers.

4. How do you handle asset caching? Answer: Set cache headers on static assets served from public/. Use CDN caching for long-lived assets.

Challenge

Deploy a Remix app to two different platforms (e.g., Vercel and Fly.io) and compare the deployment Process, performance, and scalability characteristics.

Mini Project

Set up a complete CI/CD pipeline with GitHub Actions that runs tests on every push and deploys to production on pushes to the main branch.

FAQ

What's Next

Apply everything you've learned in the Remix Final Project where you'll build a complete Remix application.