ReactJs development on docker container

Question

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

So far, I could run my application, but the download function does not work.

Application / Structure

• to build
• node_module
• the public
• CSI
• 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 

Answer 1

This is a known limitation for Windows (don’t worry, there is a good workaround)

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

inotify does not work on shared drives

Inotify currently does not work in Docker for Windows. This will become apparent, for example, when the application must read / write to the container through the installed disk. Instead of relying on the Inotify file system, we recommend using the polling features for your framework or programming language.

• Workaround for nodemon and Node.js. If you are using nodemon with Node.js, try using the alternate polling mode described here: nodemon does not restart node applications
• Docker issue for windows on github. See Inotify problem on shared drives not working

---

Workaround

However, the workaround is to use the polling mechanism:

• chokidar is a neat wrapper for node.js fs.watch/fs.watchFile/fsevents.
• nodemon - keep track of any changes in the node.js application and automatically restart the server - ideal for development.
• Webpack - If browsing does not work for you, try the polling option. Surveillance does not work with NFS and machines in VirtualBox.
• etc.

---

Full Docker & Responsive Settings

Only for your case, I launched a react-create-application in the Docker container, and the livereload function works fine. You need to enable chokidar polling by creating a .env configuration file.

Here are my settings ( 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 

Scenarios

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

Answer 2

sometimes the livereload dose does not work when the application is running in a container. If the project is running inside a virtual machine such as (provided by Vagrant) VirtualBox, create the .env file in the project directory if it does not exist, and add CHOKIDAR_USEPOLLING = true to this. This ensures that the next time you run npm start, the observer will use the polling mode inside the virtual machine if necessary.