Dockerize React Application

Dockerize Basic React App

Hi there, In this post we are Dockerizing a React app , using the Create React App generator and Docker.So, We’ll specifically focus on:

  1. Create a react app using cli and test it locally.
  2. Create a Docker image for development environment with code Hot-reloading.

Topic cover

Topic cover

  • Basic requirement for running a react/angular/express app that is we must have appropriate version of node LTS install on the system and npm (node package manager).

Install Create React App globally:

npm install -g [email protected]

Generate a new app aka “react-microservice” using CLI :

npm init react-app react-microservice --use-npm
cd react-microservice

Docker

Before Docker and writing Dockerfile you have to understand these points :

  • Basic requirement for running a react app that is we must have appropriate version of node LTS install on the system and npm (node package manager)

Add a Dockerfile to the project root:

# pull official base image
FROM node:13.10.0-alpine

# set working directory
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 --silent
RUN npm install [email protected] -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]
  • Remember : As we are just understanding and performing basic react microservice that why we are using ubuntu as a base image, but for Best Practices we have choose most optimised and lightweight image, in our situation is is node:13.12.0-alpine
  • For Best Practices go through this post : React-microservices(Best Practices)

Building Docker image

docker build -t react-microservice:dev .

Run Docker Image

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm react-microservice:dev