docker react code example

Example 1: react with docker with caprover

Dockerfile
# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY . /usr/src/app
RUN npm install
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
RUN rm -rf /etc/nginx/conf.d
RUN mkdir -p /etc/nginx/conf.d
COPY ./default.conf /etc/nginx/conf.d/
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

default.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;
  }
}


captain-definition

{
    "schemaVersion": 2,
    "dockerfilePath": "./DockerFile"
}

Example 2: docker react

# pull official base image
FROM node:13.12.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"]

Example 3: react js docker

# Stage 1 - Building image
FROM node:8.7.0-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2 - Running image
FROM bitnami/nginx:1.14.2

COPY --from=node /usr/src/app/build /var/www/my-app
COPY ./nginx.conf /opt/bitnami/nginx/conf/nginx.conf

Example 4: react js docker

version: '3'

services:
  backend:
    env_file:
        "./backend/backend.env"
    build:
      context: ./backend
      dockerfile: ./Dockerfile
    image: "dmurphy1217/twitter-sentiment-backend"
    ports:
      - "5000:5000"
  frontend:
    build:
      context: ./client
      dockerfile: ./Dockerfile
    image: "dmurphy1217/twitter-sentiment-frontend"
    ports:
      - "3000:3000"
    links:
      - "backend:be"