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

Create React app
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