ReactJs development on docker container
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.
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.