Skip to main content

React Container

Setup​

  1. Create base React project using create-react-app

  2. In project’s root, add the following files

    1. Dockerfile
    2. docker-compose.yml
    3. .dockerignore

  3. Build Docker container using Docker cli commands or docker-compose

Docker CLI Commands​

Build container​

docker build -t docker-container-name:dev .

Run previously built container​

Run this command in PowerShell (possibly as Administrator) when executing in Windows OS.

docker run -it --rm -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 -e CHOKIDAR_USEPOLLING=true docker-container-name:dev

Docker Compose Commands​

Build container​

docker-compose up -d --build

Run previously built container​

docker-compose up

Stop running container​

docker-compose stop

Sample package.json​

package.json
{
  "name": "bookmark-manager",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "docker-build": "docker-compose up -d --build",
    "docker-start": "docker-compose up",
    "docker-stop": "docker-compose stop"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^26.0.7",
    "@types/node": "^14.0.26",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "autoprefixer": "^9.8.5",
    "mdbreact": "^4.27.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.7"
  },
  "devDependencies": {
    "@types/prop-types": "^15.7.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Dockerfile​

# pull official base image
FROM node:14.8.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json .
COPY package-lock.json .

# Run the command inside your image filesystem.
RUN npm install --silent

# Add metadata to the image to describe which port the container is listening on at runtime.
EXPOSE 3000

# start app
CMD ["npm", "start"]

# Copy the rest of your app's source code from your host to your image filesystem.
COPY . .

.dockerignore​

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

docker-compose.yml​

version: '3.7'

services:
  bookmarks-manager:
    container_name: bookmarks-manager
    build:
      context: .
      dockerfile: Dockerfile
    image: bookmarks-manager:dev
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    tty: true