Dockerizing React App

Written with Cameron Gibson

Versions

Node version: v16.13.0
Docker version: 20.10.12

Link

GitHub Repository
Here’s How to Dockerize React App

Table of Contents

1. Create React app
2. Create Dockerfile, image and run the container

1. Create React app

① Create React App following official tutorial
② Run command below

npx create-react-app <app name> # witch is going to be the folder name
cd <app name>
npm start

③ Access to http://localhost:3000
Confirm you can see React app welcome page

④ Stop Running by Ctrl + C

2. Create Dockerfile, image and run the container

① CreateDockerfile in root directory
And copy the code below

# Dockerfile
FROM node:16
WORKDIR /reactapp
ENV PATH /reactapp/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm i
COPY . ./
CMD ["npm", "start"]

② Build image

docker build -t <image name> . 

③ Run container

docker run \
    -it \
    --rm \
    -v ${PWD}:/reactapp \
    -v /reactapp/node_modules \
    -p 3001:3000 \
    -e CHOKIDAR_USEPOLLING=true \
    <image name>:latest

④ Access to http://localhost:3001
Confirm you can see React app welcome page