Deploy your SaaS with fly.io

This guide will show you how to deploy your supastarter SaaS to fly.io in minutes. And the best part? You can actually start for free thanks to the generous free tier of fly.io.

Why host your SaaS on fly.io?

Self-hosting your SaaS app as a docker image allows you to have complete control over your server environment. It ensures better privacy, contributes to cost savings if managed correctly, and offers you the flexibility to customize your server setup to suit your specific needs. It can also give your application a performance boost compared to hosting on a serverless platform like Vercel, since it removes cold starts.

Setup Next.js app for docker deployment

Before you can deploy your application to fly.io, you need to configure your project to be built as a standalone app and create a Dockerfile, so that you can run your application as a docker image on the fly.io platform.

You can find a working example of this on the feature/docker-deploy branch in the supastarter repository.

First add the following config to your apps/web/next.config.js :

module.exports = {
  //...
  output: "standalone",
};

Setup docker configuration for the Next.js app

Next, create a Dockerfile in the root of your Next.js app (apps/web/Dockerfile) with the following content:

FROM node:20-alpine AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
 
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
RUN pnpm add -g turbo
COPY . .
RUN turbo prune web --docker
 
FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ .
COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
ENV CYPRESS_INSTALL_BINARY=0
RUN pnpm install
 
COPY --from=builder /app/out/full/ .
COPY turbo.json turbo.json
 
RUN pnpm turbo run build --filter=web...
 
FROM base AS runner
WORKDIR /app
 
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/apps/web/next.config.js .
COPY --from=installer /app/apps/web/package.json .
 
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
 
USER nextjs
 
EXPOSE 3000
 
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
 
CMD ["node", "apps/web/server.js"]

In the root of the supastarter project, also add a .dockerignore file with the following content:

Dockerfile
.dockerignore
node_modules
**/node_modules
npm-debug.log
README.md
.next
.git

And that’s all the changes necessary! Now you can build your app as a docker image and deploy it anywhere you can run docker images.

Running your app locally with Docker

If you have Docker installed on your local machine, you can test the docker image by simply running the following commands from your project’s root:

docker build -f apps/web/Dockerfile . --no-cache -t supastarter-docker
docker run -p 3000:3000 supastarter-docker

To fully use the application, you need to pass the necessary environment variables you have defined in your .env.local file to the container.

Deploying your application to Fly.io

Make sure you have an account on Fly.io before continuing. You can sign up for free at fly.io.

To deploy your application with Docker to fly.io simply install the Fly CLI and run the following command from your project’s root:

fly launch --dockerfile apps/web/Dockerfile

Follow the steps in the CLI and configure the used port to 3000 in the deployment configuration and you should have a running instance of your app within a few minutes on fly.io.

And that's all it takes to deploy your supastarter SaaS with fly.io! If you have questions, feedback or feature requests, feel free to reach out to us on Twitter.