Using React.js with Docker

Managing updates, CI/CD, and deployments with a monolithic app can cause you so much trouble. Enter containers!

Nov 7, 2020 • 5 Minute Read

Introduction

In modern software development, apps are developed with multiple frameworks, languages, and technologies. Managing updates, CI/CD, and deployments with a monolithic app can cause you so much trouble. Enter containers! In this guide, you'll learn about Docker and how to use it with your React app.

What is Docker?

Docker was introduced in 2013 by Docker Inc. It enables applications to run in an isolated state using containers. Doing this enables your app to be packaged with only the libraries and dependencies it needs. Unlike virtual machines, which provide hardware virtualization, a container provides OS-level virtualization by isolating the software from its environment, ensuring that it works uniformly despite differences, and solving the "it works on my machine" problem. Multiple containers can run on one host machine or over multiple machines using an orchestration tool like Docker-swarm or Kubernetes.

Set Up Docker

To install Docker, visit this URL and download the setup that suits your machine type. Docker uses a layered filesystem to build your container with the specifications of the container runtime provided by you in a file named Dockerfile. After installing Docker, run the following command in your terminal to verify Docker has been installed.

          $ docker --version
Docker version 19.03.8, build afacb8b
    

Set Up a React App

Next, pick any React app of your choice or set up another from scratch by running the command below.

          $ npx create-react-app <your_app_name>

#<your_app_name> - preferred name of your app

Now create a file called Dockerfile at the root of your project and add the following.

          # pull the base image
FROM node:alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./

COPY package-lock.json ./

RUN npm install

# add app
COPY . ./

# start app
CMD ["npm", "start"]
    

What's happening here 🤔?

You first instructed Docker to pull the official Node image, set a working directory for your app, and install all your dependencies.

To ensure you don't end up with a bloated container, add a .dockerignore file to avoid copying unnecessary files into the container. Inside your .dockerignore file, add the following.

          node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules
    

To get your container up, run the following command in your terminal to build an image upon which your container will be built.

      $ docker build -t ps-container:dev .

Your output should look similar to the following :

          Sending build context to Docker daemon  630.3kB
Step 1/8 : FROM node:alpine
 ---> 89234s7298ds
Step 2/8 : WORKDIR /app
 ---> Using cache
 ---> 8da38hd8a9848
Step 3/8 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> e930973d8h383
Step 4/8 : COPY package.json ./
 ---> Using cache
 ---> jnd3898398h8r
Step 5/8 : COPY package-lock.json ./
 ---> 390jf983h8hf8
Step 6/8 : RUN npm install
 ---> Running in 23uf2983f98
 ...
Step 7/8 : COPY . ./
 ---> ca58e0ca87b9
Step 8/8 : CMD ["npm", "start"]
 ---> Running in cdcb3617af0c
Removing intermediate container cdcb3617af0c
 ---> d89b7bb5b6fa
Successfully built d89b7bb5b6fa
Successfully tagged ps-container:dev

$ docker image ls
REPOSITORY              TAG                 IMAGE ID            CREATED              SIZE
ps-container             dev                3894y8h893hd        About a minute ago   392MB
    

Now run the following command to create and run your container.

          $ docker run -it --rm \
-v ${PWD}:/app \
-v /app/node_modules \
-p 3001:3000 \
-e CHOKIDAR_USEPOLLING=true \
ps-container:dev
    

Notice what the code is doing:

it starts the container in interactive mode.
-rm removes the container and volumes after the container exits.
v ${PWD}:/app mounts the code into the container at /app.

Conclusion

In this guide, you learned how to use Docker with React, build an image, and create a Docker container from that image. Visit the official documentation to learn more at https://docs.docker.com. Feel free to ping me on Twitter if you'd like to chat more at @DesmondNyamador.