ReactJs development on docker container

Question

How can i use docker container to develop Reactjs with docker on windows ?

So far I've been able to run my app, but livereload does not work.

App/structure

build
node_module
public
src
docker-compose.yml
Dockerfile

Dockerfile

FROM node:5.11.0-slim

# Prepare app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app/

# Install dependencies
COPY package.json /usr/src/app/
RUN npm install --silent

ADD . /usr/src/app/

CMD [ "npm", "start" ]

docker-compose.yml:

version: "2"

services:
  frontend:
    container_name: "boilerplate"
    build: .
    environment:
      env_file: .env
      NODE_ENV: development
    ports:
      - '3000:3000'
    volumes:
      - .:/usr/src/app

You don't need the EXPOSE or ADD in your dockerfile since you have them in compose. What path is livereload watching? — Chris Tanner
– Chris Tanner, Commented Mar 23, 2017 at 14:03
I've not used livereload but it looks like you need to set server.watch("/usr/src/app"), or alternatively use nodemon which drops in place of node and doesn't need any extra settings to do live reloading. — Chris Tanner
– Chris Tanner, Commented Mar 23, 2017 at 14:59
@ChrisTanner, with nodemon work for me :) but is a little slow :( thank very much for the answer — Bruno Reis
– Bruno Reis, Commented Mar 23, 2017 at 16:05

Jordan Enev · Accepted Answer · 2017-03-29 18:12:07Z

13

+50

It's a known limitation for Windows (don't worry too much, there is a good workaround)

This is a known limitation for Docker on Windows host. Here is what the Docker's documentation says about the problem:

inotify on shared drives does not work

Currently, inotify does not work on Docker for Windows. This will become evident, for example, when an application needs to read/write to a container across a mounted drive. Instead of relying on filesystem inotify, we recommend using polling features for your framework or programming language.

Workaround for nodemon and Node.js - If you are using nodemon with Node.js, try the fallback polling mode described here: nodemon isn’t restarting node applications

Docker for Windows issue on GitHub - See the issue Inotify on shared drives does not work

The workaround

However, the workaround is to use a polling mechanism:

chokidar - A neat wrapper around node.js fs.watch / fs.watchFile / fsevents.
nodemon - Monitor for any changes in your node.js application and automatically restart the server - perfect for development.
webpack - If watching does not work for you, try out polling option. Watching does not work with NFS and machines in VirtualBox.
etc ...

Complete Docker & React setup

Just for your case I've started react-create-app in a Docker container and livereload feature works perfect. The gotcha is to enable chokidar polling by creating .env configuration file.

Here are my configurations (inspired by @haluvibe):

Dockerfile

FROM node:6.9.4

# Prepare app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app/

# Install dependencies
COPY package.json /usr/src/app/
RUN npm install --silent

ADD . /usr/src/app/

EXPOSE 3000
CMD [ "npm", "start" ]

docker-compose.yml

version: "2"

services:
  frontend:
    container_name: "boilerplate"
    build: .
    environment:
      env_file: .env
      NODE_ENV: development
    ports:
      - '3000:3000'
    volumes:
      - .:/usr/src/app

.env

CHOKIDAR_USEPOLLING=true

Scripts

docker-compose up -d - Start your project and it will be available at http://localhost:3000.
docker-compose run --rm boilerplate /bin/bash - Access your container.

edited Mar 29, 2017 at 18:12

answered Mar 28, 2017 at 9:05

Jordan Enev

18.8k3 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sergio Nikolaev Over a year ago

Cool! and how exactly could one use vscode with git integration, while running said container e.g. inside centos7 vm? i could ssh into this vm and use mapped volume but that gonna ruin all container goodness.

Jordan Enev Over a year ago

This is out of my knowledge and experience. The answer is focused on running Docker locally on your OS, in order the developers to have a reproducible development environment.

Fernando Tholl Over a year ago

I did the configuration with nodemon and CHOKIDAR_USEPOLLING = true in .env and it worked, but my VM consumes 100% of the CPU to be analyzing the changes, any alternative solution for that?

Qazi Danish · Accepted Answer · 2019-10-11 16:42:56Z

2

some times livereload dose not work when the app is running inside a container, If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

answered Oct 11, 2019 at 16:42

Qazi Danish

1561 silver badge5 bronze badges

Collectives™ on Stack Overflow

ReactJs development on docker container

2 Answers 2

It's a known limitation for Windows (don't worry too much, there is a good workaround)

The workaround

Complete Docker & React setup

Scripts

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

It's a known limitation for Windows (don't worry too much, there is a good workaround)

The workaround

Complete Docker & React setup

Scripts

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related