Docker with React, refresh the updates without having to upload the container again

Question

I created an application in React and decided to run it with Docker locally, only for development

At Dockerfile it was like this:

FROM node:8
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

In Docker-Compose.yaml:

version: '3'

services:
 node8-app:
  build: .
  ports:
    - "3000:3000"
  volumes:
   - ./:/usr/src/app

It worked, but when I make some change, and saved, I need to kill the container, and go back up to see what changed.

There’s some way to do it, without having to kill the container?

Answer 1

In the Dockerfile create the following code.

FROM node:8

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package.json .
COPY yarn.lock .
RUN yarn

COPY . ./code

EXPOSE 3000
CMD [ "npm", "run", "start.dev" ]

In his Compose utilize

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - ./:/usr/src/app/code
      - /usr/src/app/node_modules # Remove this if you have pure JS dependencies
    ports:
      - "3000:3000"

At last, change the path of your package.json using

{
  "main": "code/index.js",
  "scripts": {
    "start": "node index",
    "start.dev": "nodemon"
  },
  "dependencies": {
    "express": "^4.16.2"
  },
  "devDependencies": {
    "nodemon": "^1.14.12"
  }
} 

Whenever you change your index.js utilize docker-compose up --build this makes a refresh on your index without the need to restart or recreate the container.

References, you can check on this link

Answer 2

A way that I find a little more "clean" you can create the following files:

Dockerfile-dev

FROM node:8

WORKDIR /app

COPY . /

VOLUME /app
EXPOSE 3000

CMD yarn; yarn start

Docker-Compose.yml

version: '3'
services:
  react-docker-app:
    build:
      context: .
      dockerfile: Dockerfile-dev
    ports:
      - "3000:3000"
    user: ${CURRENT_UID}
    volumes:
      - ./:/app

To run, run the command CURRENT_UID=$(id -u):$(id -g) docker-compose up -d --build

The variable CURRENT_UID is so that your user is the same as the container execution and does not lock the folder node_modules.

Note: I use the shell script below to assist development:

dev.sh

#!/usr/bin/env bash
export STACK_NAME="dev"
export CURRENT_UID=$(id -u):$(id -g)
case "$1" in
    start)
        echo "Starting ${STACK_NAME} stack"
        docker-compose -p ${STACK_NAME} up -d --remove-orphans --build
        ;;
    stop)
        echo "Stopping ${STACK_NAME} stack"
        docker-compose -p ${STACK_NAME} stop
        ;;
    restart)
        echo "Restarting ${STACK_NAME} stack"
        docker-compose -p ${STACK_NAME} restart
        ;;
    clean)
        echo "Cleaning ${STACK_NAME} stack"
        docker-compose -p ${STACK_NAME} down -v
        ;;
    *)
        echo "Accepted commands: start, stop, restart or clean"
        ;;
esac

Sample source in this repository git.