Docker configuration to run react app

react_on_docker2.md

Setup docker to run React app

After setting up docker to generate React app without installing node js in https://gist.github.com/przbadu/4a62a5fc5f117cda1ed5dc5409bd4ac1 It was confusing to some of the devs, how to run react app, so I am creating this as second step to the configuration.

Generate required files in your react project

cd my-react-app
touch Dockerfile Dockerfile.dev docker-compose.yml .dockerignore

.dockerignore is used to ignore files or directories that you want to ignore in docker build process. Dockerfile is a set of instructions used to construct an image. this file is for production environment Dockerfile.dev is similar to Dockerfile but for development environment docker-compose.yml is a tool for defining and running multi-container Docker applications with one command mostly docker-compsose up

my-react-app/.dockerignore

Add files and directories that you want to ignore in docker build process in .dockerignore file

node_modules
build
.dockerignore
Dockerfile
Dockerfile.dev

Dockerfile.dev

# we will use node:alpine docker image
FROM node:alpine

# set /app as work directory
WORKDIR /app

# copy package.json to work directory, so that we install npm dependencies
COPY package.json /app

# install npm dependencies
RUN npm install # OR `RUN yarn install`

# copy your project files to work directory
COPY . /app

# run your app
CMD ["npm", "start"] # OR CMD ['yarn', 'run', 'start']

docker-compose.yml

version: '3'
services:
  client:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - "/app/node_modules"
      - "./:/app"

Now that your Dockerfile and docker-compose.yml files are ready run your app using below command

Run your app

docker-compose up

And once the docker-compose command is successful, you should see your app running at http://localhost:3000/

YaY!! That's your development environment setup.

Production setup

If you are interested in production docker configuration, then you can follow below instructions:

Dockerfile

# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
RUN npm install react-scripts@3.4.1 -g --silent
COPY . ./
RUN npm install
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

# If you are using react-router, uncomment below line
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This dockerfile will install all node dependencies, then build your react app (create build directory), Then our nginx setup will serve our app from this build directory.

Update your docker-compose.yml file

`docker-compose.yml

version: '3.7'

services:
   web-dev:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - "/app/node_modules"
      - "./:/app"
  web-prod:
    container_name: my-app-prod
    build: .
    ports:
      - '1337:80'

NOTE: if you are using same docker-compose.yml file for both dev and production environment, then you need to run development environment with docker-compose up web-dev. if you run docker-compose up then it will by default run all the containers defined inside docker-compose file.

Nginx configuration

Create the nginx.conf file inside nginx directory inside your project e.g my-react-app/nginx/nginx.conf

mkdir -p nginx
touch nginx/nginx.conf

nginx/nginx.conf

server {
   listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

NOTE: Although this example shows us how to configure Docker for both dev and production envionrment, you might not need docker-compose.yml for production build, as your hosting provider will handle that, but Dockerfile and nginx.conf iwll require.