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:
- Create a react app using cli and test it locally.
- 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-microserviceDocker
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)
- If Docker is not configured or installed on your ubuntu system then check this post : Install Docker on Ubuntu 18.04
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