How to Build and Deploy Remix Apps to Netlify

Have you heard about Remix? Do you love it? Yes? Okay.

Well in case you haven’t, it’s a newly open-sourced fullstack framework for building modern web apps. It is focused on providing a fast, resilient, and slick user experience for both you (the developer) and your users.

If it sounds great and you want to give it a try, get started here!

Now that we are all familiar, allow me to show you the fastest, quickest and smoothest way to deploy your Remix apps on Netlify.

Deploy with Git

First, start with selecting Netlify as a deployment target when you create a new Remix app.

The CLI command to create a new Remix app is:

npx create-remix@latest

When you run this command, the next prompt will ask you to select a deployment target:

Select Netlify as a deployment target for Remix

Scroll down to Netlify and hit enter.

When the project setup process is done, you should see that you have a netlify.toml file created and prefilled as part of your code files. This file will look like this:

[build]
  command = "remix build"
  functions = "netlify/functions"
  publish = "public"

[dev]
  command = "remix watch"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

With that, you can go ahead and build the next big thing with Remix. When you’re done and ready to share with the world, push the project to your preferred Git provider.

Connect Your Netlify Account to Your Remix Project

Now go to your Netlify UI, and press the following buttons:

Add new site (select the option to import an existing project from your Git provider).
Select the Git repository containing your Remix project

At this point, Netlify will auto-detect the configurations in your toml file and prefill the deployment form for you.

Prefilled Remix deployment form

As a result, all you have to do is click Deploy site!

And that’s it!

To recap quickly in less detail, here’s how to deploy a Remix site on Netlify:

🚚 Push your Remix project to Git.

✅ In your Netlify UI, select your Remix project repository.

🚀 Deploy.

Too simple? I think so too.

Deploy from the CLI

If you’re a fan of hacking with the CLI, you’re not left out. You can deploy Remix apps on Netlify with a handful of commands, here’s how:

Install the Netlify CLI if you don’t already have it by running this command:

npm i -g netlify-cli@latest

Next, log in to your Netlify account via the CLI with:

netlify login

Create a new Netlify site by running this command:

netlify init

Now, run the Netlify build command to generate your Remix site into the /public folder.
And finally, deploy your app to the world, run:

netlify-deploy --prod

Annnnnnnnnnnnnnnd that’s it, you should now see your website URL printed on your terminal for the whole world to use.

Remember, if your experience is different from the steps written here or something didn’t quite work as expected, you can tell us about it here and we’ll assist you.