How to Use React.js with Docker

Docker is a platform that simplifies the process of building, running, managing, and distributing applications. It provides a lightweight and portable way to package software into units called containers. Containers are like self-contained environments that include everything an application needs to run, including its code, runtime, system tools, system libraries, and settings.

In this tutorial, we will learn about Docker and how to use it with your React app.

• Set Up Docker
• Set Up a React App

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: 1. it starts the container in interactive mode. 2. -rm removes the container and volumes after the container exits. 3. v ${PWD}:/app mounts the code into the container at /app.

In this guide, you learned how to use Docker with React, build an image, and create a Docker container from that image.

#react #docker