Deploying to Fly.io in Remix - Mini Project: Build & Apply

Deploying a Remix App to Fly.io

📖 Scenario: You have built a Remix web app and want to make it available on the internet. Fly.io is a platform that lets you deploy apps easily close to your users worldwide.In this project, you will prepare your Remix app for deployment, configure Fly.io settings, and deploy your app step-by-step.

🎯 Goal: By the end, you will have a Remix app deployed on Fly.io, accessible via a public URL.

📋 What You'll Learn

Create a fly.toml configuration file with app name and build settings

Add a Dockerfile to containerize the Remix app

Initialize Fly.io app with flyctl launch --no-deploy

Deploy the app using flyctl deploy

💡 Why This Matters

🌍 Real World

Deploying web apps to cloud platforms like Fly.io makes your app accessible worldwide with minimal setup.

💼 Career

Knowing how to deploy Remix apps to platforms like Fly.io is valuable for frontend and full-stack developers working on modern web projects.

1

Create the Fly.io configuration file

Create a file named fly.toml in your project root with these exact contents:

[app]
name = "my-remix-app"

[build]
builder = "heroku/buildpacks:20"

Remix

# Create fly.toml file with app name and build settings
# Your code here

Hint

The fly.toml file tells Fly.io your app's name and how to build it.

2

Add a Dockerfile to containerize the Remix app

Create a file named Dockerfile in your project root with these exact lines:

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "start"]

Remix

[app]
name = "my-remix-app"

[build]
builder = "heroku/buildpacks:20"

# Create Dockerfile with Node 18 alpine base and build steps
# Your code here

Hint

The Dockerfile defines how to build and run your Remix app inside a container.

3

Initialize the Fly.io app without deploying

Run the command flyctl launch --no-deploy --name my-remix-app in your terminal to initialize the Fly.io app configuration without deploying yet.

Remix

[app]
name = "my-remix-app"

[build]
builder = "heroku/buildpacks:20"

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "start"]

# Run flyctl launch --no-deploy --name my-remix-app in terminal
# Your code here

Hint

This command sets up your Fly.io app configuration but does not deploy yet.

4

Deploy your Remix app to Fly.io

Run the command flyctl deploy in your terminal to build and deploy your Remix app to Fly.io.

Remix

[app]
name = "my-remix-app"

[build]
builder = "heroku/buildpacks:20"

FROM node:18-alpine
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "run", "start"]

flyctl launch --no-deploy --name my-remix-app

# Run flyctl deploy in terminal to deploy your app
# Your code here

Hint

This command uploads your app to Fly.io and makes it live.