How to Dockerize a Remix App

Docker
React
Remix run
Tutorials

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:

touch 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

FROM 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

//directory
WORKDIR /usr/server/app

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

COPY ./package.json ./
RUN 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.

COPY ./ .

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.

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

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

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

In summary, this is what our dockerfile looks like.

FROM node:16-alpine
WORKDIR /usr/server/app

COPY ./package.json ./
RUN npm install
COPY ./ .
RUN npm run build
ENV NODE_ENV=production
CMD ["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:

node_modules
npm-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.

docker 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.

 docker images
REPOSITORY   TAG       IMAGE ID       CREATED         SIZE
remix/run    latest    86dae0f4dff9   3 minutes ago   470MB
Run the image
docker 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.

docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS                                       NAMES
4d039e503335   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.

docker logs <container-id>

If you want to go inside your container.

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

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