CODEWITHSUNDEEP
reactjsdocker
Toma Tomov
Toma Tomov

Reputation: 1654

Docker react image doesn't hot reload

Red all the posts around. Tried with lower "react-scripts" (mine is 5.0.1), used CHOKIDAR_USEPOLLING: 'true', basically everything on the first two pages on google. Hot reloading still doesn't work. My docker-compose.yaml:

version: '3.3'

services:
  database:
    container_name: mysql
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: toma123
      MYSQL_DATABASE: api
      MYSQL_USER: toma
      MYSQL_PASSWORD: toma123
    ports:
      - '4306:3306'
    volumes:
      - mysql-data:/var/lib/mysql

  php:
    container_name: php
    build:
      context: ./php
    ports:
      - '9000:9000'
    volumes:
      - ./../api:/var/www/api
    depends_on:
      - database

  nginx:
    container_name: nginx
    image: nginx:stable-alpine
    ports:
      - '8080:80'
    volumes:
      - ./../api:/var/www/api
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - database

  react:
    container_name: react
    build:
      context: ./../frontend
    ports:
      - '3001:3000'
    volumes:
      - node_modules:/home/app/node_modules

volumes:
  mysql-data:
    driver: local
  node_modules:
    driver: local

And my react Dockerfile

FROM node

RUN mkdir -p /home/app

WORKDIR /home/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

Upvotes: 0

Views: 80

Answers (1)

David Maze
David Maze

Reputation: 158748

Even if a lot of your application is in Docker it doesn't mean you need to exclusively use Docker. Since one of Docker's primary goals is to prevent containers from accessing host files, it can be tricky to convince it to emulate a normal host live-development environment.

Install Node on your host. It's likely you have this anyways, or you can trivially apt-get install or brew install it.

Start everything except the front-end application you're developing using Docker; then start your application, on the host, in the normal way.

docker-compose up -d nginx
npm run dev

You may need to make a couple of configuration changes for this to work. For example, in this development environment, the database address will be localhost:4306, but when deployed it will be database:3306, and you'll need to do things like configure Webpack to proxy backend requests to http://localhost:8080. You might set environment variables in your docker-compose.yml for this, and in your code have them default to the things they are in the non-Docker development environment.

const dbHost = process.env.DB_HOST || 'localhost';
const dbPort = process.env.DB_PORT || 4306;

In your Compose setup, do not mount volumes: over your application code or libraries. Once you get up to the point of doing final integration testing on this code, build and run the actual image you're going to deploy. So that section of the Dockerfile might look like

version: '3.8'
services:
  react:
    build: ../frontend
    ports:
      - '3001:3000'
    # no volumes:
    # container_name: is also unnecessary

Upvotes: 1

Related Questions