Skip to content

How to Dockerize a Remix App

Docker, React, Remix run, Tutorials2 min read

Photo by Antonio Batinić from Pexels

Introduction

Remix is a React server and browser runtime that provides out of the box server side rendering, snappy page loads, and instant transitions with near-zero configuration.

In this blog post, we will demonstrate how to Dockerize Remix applications.

Requirements
  • Working Docker installation.
  • Working Remix installation.
  • Basic understanding of how a Node.js application is structured.
The Dockerfile

In order to dockerize your remix app, you need to create a dockerfile at the root of your application. Dockerfiles are simple text files containing instructions on how to create Docker images.

In a simple docker file we would:

  • Install dependencies.
  • Build our application.
  • Setup environment variables.
  • Setup the start command that will run the application.

Create an empty file called Dockerfile:

1touch dockerfile

Let's start by defining what image we want to build from. Here, we will use the 16-alpine version of NodeJS that can be found on the Docker Hub

1FROM node:16-alpine

We will now create a directory for the application code inside the Docker image. This will be the working directory for your application

1//directory
2WORKDIR /usr/server/app

Since NodeJS and npm are pre-installed in this image, the next step is to install the remix app's dependencies.

1COPY ./package.json ./
2RUN npm install

Note that we are only copying the package.json instead of copying the entire source code. This enables you to take advantage of Docker layer caching. A good explanation of this can be found here.

The next step would be to copy the entire source code.

1COPY ./ .

At this point, our source code and dependencies are all set in our Docker image. The next step is to build the remix app and set some environment variables.

1RUN npm run build # will build remix app
2ENV NODE_ENV=production

Finally, we define the command to run our remix app using CMD.

1CMD ["npm", “run” ,"start"]

In summary, this is what our dockerfile looks like.

1FROM node:16-alpine
2WORKDIR /usr/server/app
3
4COPY ./package.json ./
5RUN npm install
6COPY ./ .
7RUN npm run build
8ENV NODE_ENV=production
9CMD ["npm", “run” ,"start"] # will launch the remix app when we run this Docker image.
.dockerignore file

Create a .dockerignore file in the same directory as your Dockerfile. Add following content:

1node_modules
2npm-debug.log

This prevents your local modules and debug logs from being copied onto your Docker image.

Building your image

Go to the directory that has your Dockerfile and run the following command to build the Docker image.

1docker build -f./Dockerfile . -t remix/run

The -t flag lets us tag our image so that it's easier to find in our list of docker images.

Your image will be listed by Docker now.

1docker images
1REPOSITORY TAG IMAGE ID CREATED SIZE
2remix/run latest 86dae0f4dff9 3 minutes ago 470MB
Run the image
1docker run -p 3000:3000 -d remix/run

When you run your image with -d, the container runs in detached mode. It now runs in the background The -p flag redirects a public port (host's port) to a private port inside the container.

Go to http://localhost:3000 and your application should be running.

View Running Containers

If you wish to see all running Docker containers, you can run ps command.

1docker ps
1CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
24d039e503335 remix/run "docker-entrypoint.s…" 20 seconds ago Up 19 seconds 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp nostalgic_booth

If you wish to see the logs of your application.

1docker logs <container-id>

If you want to go inside your container.

1docker exec -it <container id> /bin/sh

I hope this blog post helped you with Dockerizing your remix application. Feel free to give feedback here.

© 2022 by HannadRehman. All rights reserved.