Build snappy, accessible web experiences by designing your app with Remix. When you're ready to launch, deploy to Koyeb to get seamless scaling, git-driven build and deployments, and global edge availability.
Remix is a full stack web framework focused on making it simpler to build modern, standards-aligned web apps that run anywhere. With features like nested routes, progressive enhancement, and error boundaries, Remix allows you to create great user experiences built on foundational web technologies.
This guide explains how to deploy a Remix application to Koyeb using:
To successfully follow this documentation, you will need to have a Koyeb account. You can optionally install the Koyeb CLI if you prefer to follow this guide without leaving the terminal.
You can deploy and preview the Remix application from this guide using the Deploy to Koyeb button below.
You can consult the repository on GitHub to find out more about the example application that this guide uses.
Get started by creating a minimalistic Remix application that we will deploy to Koyeb. You will need Node.js installed on your machine.
To generate a new Remix application, run the
npx create-remix@latest command:
Remix will ask some questions about how you want to configure your project. For this demonstration, we'll select:
example-remixas the name of the project
npm installfor the project
Your project will be configured in a new directory matching the name you selected. The project's dependencies will be downloaded and installed, leaving you with a basic, but functional project directory to get started.
Move into the new project directory:
If you run
tree -a -I node_modules to show the project hierarchy (excluding the
node_modules dependencies), a directory structure similar to this should be present:
. ├── app │ ├── entry.client.tsx │ ├── entry.server.tsx │ ├── root.tsx │ └── routes │ └── _index.tsx ├── .eslintrc.js ├── .gitignore ├── package.json ├── package-lock.json ├── public │ └── favicon.ico ├── README.md ├── remix.config.js ├── remix.env.d.ts └── tsconfig.json
With the project bootstrapped and the dependencies installed, start the development server by typing:
npm run dev
In your web browser, navigate to
http://127.0.0.1:3000 to see the default Remix landing page. It is rather basic by default, showing just a heading and some documentation links, but it is enough to validate that the development server is able to serve your project successfully.
Press CTRL-C to stop the development server after verifying.
Once you've verified that the project runs locally, create a new Git repository to save your work.
Run the following commands to create a new Git repository within the project's root directory, commit the project files, and push changes to GitHub. Remember to replace the values of
<YOUR_REPOSITORY_NAME> with your own information:
git init git add . git commit -m "Initial commit" git remote add origin email@example.com:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git git push -u origin main
To deploy the Remix app on Koyeb, using the control panel follow the steps below:
A Koyeb App and Service will be created. Your application will be built and deployed to Koyeb. Once the build has finished, you will be able to access your application running on Koyeb by clicking the URL ending with
To deploy the Remix app on Koyeb using the Koyeb CLI, run the following command in your terminal:
koyeb app init example-remix \ --git github.com/<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME> \ --git-branch main \ --ports 3000:http \ --routes /:3000 \ --env PORT=3000
Make sure to replace
<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME> with your GitHub username and repository name.
To track the app deployment and visualize build logs, execute the following command:
koyeb service logs example-remix/example-remix -t build
Once the deployment of your application has finished, you can retrieve the public domain to access your application by running the following command:
$ koyeb app get example-remix ID NAME DOMAINS CREATED AT 55d75993 example-remix ["example-remix-myorg.koyeb.app"] 20 Apr 23 09:55 UTC
With your app running, you can track the runtime logs by running the following command:
koyeb service logs example-remix/example-remix -t runtime
As an alternative to using git-driven deployment, you can deploy a pre-built container from any public or private registry. This can be useful if your application needs specific system dependencies or you need more control over how the build is performed.
To dockerize the Remix application, start by adding a file called
.dockerignore to the project's root directory. Paste the following contents to limit the files copied to the Docker image:
Dockerfile .dockerignore .git node_modules npm-debug.log /.cache /build /public/build .env README.md
Afterwards, create a
Dockerfile in your project root directory and copy the content below:
FROM node:18-alpine AS base FROM base AS deps RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci FROM base AS builder WORKDIR /app COPY /app/node_modules ./node_modules COPY . . RUN npm run build && npm cache clean --force FROM base AS runner WORKDIR /app RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 remix COPY /app . USER remix EXPOSE 3000 ENV PORT 3000 CMD ["npm", "run", "start"]
The Dockerfile above provides the minimum requirements to run the Remix application. You can easily extend it depending on your needs.
To build and push the Docker image to a registry and deploy it on Koyeb, refer to the Deploy an app from a Docker image documentation.