l2t

Dockerize ReactJs App

How to dockerize react js application

To create dockerize app for reactjs you first need to have desired node version on your local or prod machine. To install and manage multiple nodejs version on your local machine checkout my following tutorial on nvm installation:

Install NodeJs using NVM

I assume that you already have docker installed on your local machine. Moving on let's now install react-create-app cli tool. Open your terminal window and type following commands:

# install create-react-app
npm install -g create-react-app

# let's create a sampler react app
create-react-app reactjs-example

# let's head into our project dir
cd reactjs-example

Build local or dev dockerfile

Let's first get react up and running on our local environment using docker. Open your terminal window and let's create a file called Dockerfile.dev with following contents:

# get the base node image
FROM node:alpine as builder

# set the working dir for container
WORKDIR /frontend

# copy the json file first
COPY ./package.json /frontend

# install npm dependencies
RUN npm install

# copy other project files
COPY . .

# build the folder
CMD [ "npm", "run", "start" ]

Basically we are doing following with our dockerfile:

  • Downloading a base image from dockerhub
  • Defining a working directory for our container
  • Copying package.json file and place it in container working dir
  • Installing our npm dependencies
  • Copying rest of the project files
  • Finally, running npm start command to run dev env

Now, we have a dockerfile with all instructions that we need in order to create our docker image. Let's now define and create our container using docker-compose-local.yml file. Open your terminal window and create docker-compose-local.yml file with following contents:

version: '3'
services: 
    frontend:
        build: 
            context: .
            dockerfile: Dockerfile.dev
        command: npm run start
        container_name: frontend
        ports:
            - "3000:3000"        
        volumes: 
            - ./:/frontend
            - /frontend/node_modules

Alright, our docker compose file defines how our container will look like and port we expose to our host machine. Let's now create a container using this defination. Open your terminal window and run following command to create our dev env:

# create and run our container
docker-compose -f docker-compose-local.yml up -d

Finally, above command will get our react app up and running. Now, you can access your running app on http://localhost:3000.

Build production dockerfile

Now, that we have our local environment all set we need to get our production environement ready. Let's now create following two files:

  • Dockerfile
  • docker-compose.yml

Open Dockerfile and add following contents:

# get the base node image
FROM node:alpine as builder

# set the working dir for container
WORKDIR /frontend

# copy the json file first
COPY ./package.json /frontend

# install npm dependencies
RUN npm install

# copy other project files
COPY . .

# build the folder
RUN npm run build

# Handle Nginx
FROM nginx
COPY --from=builder /frontend/build /usr/share/nginx/html
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

Let's now create a new nginx config file in docker/nginx/default.conf with following contents:

server {
  listen 80;
  server_name _;

  index index.html;
  root /usr/share/nginx/html;
  
  error_log /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log;
  
  location / {
    try_files $uri /index.html =404;
  }
}

Alright, we defined out nginx production config file finally we need to create docker-compose.yml  file with following contents:

version: '3'
services:          
    frontend:
        build: .     
        container_name: frontend
        ports:
            - "80:80"
        volumes: 
            - ./:/frontend
            - /frontend/node_modules

Cool, we are now done here in order to check our production environment locally let's run following command:

# create and run a container
docker-compose up -d

Open your browser and hit http://localhost  to see your react project is up and running.

I hope you like my tutorial please do share with your friends and hit like button below: To download source code for above tutorial checkout following github example:

ReactJs & Docker Example