17

I am using docker-compose in visual studio 2019 with docker for windows running linux containers. I want to enable hot reload for the angular client app.

I modified the npm command running the app to include poll like:

"docker-start": "ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy-conf.json --poll 1"

and added a volume into docker-compose like so:

volumes:
  - ./ClientApp:/app/

also additionally exposing the webpack port 

ports:
  - 4200:4200
  - 49153:49153

docker-compose file is at the root of the repo and the angular app is in the /ClientApp folder. This makes the application throw cannot GET\ every time I navigate to localhost:4200. If I comment out the volume mapping, the application starts working but the reload does not. I would like it to listen to changes in the code and update the container as needed every time I change any frontend code.

Entire dockerfile:

FROM node:9.6.1

RUN mkdir -p /app
WORKDIR /app
EXPOSE 4200
EXPOSE 49153

ENV PATH /app/node_modules/.bin:$PATH

COPY . /app

RUN npm install --silent
RUN npm rebuild node-sass

CMD ["npm", "run", "docker-start"]
qubits
  • 1,227
  • 3
  • 20
  • 50
  • Can you post the Dockerfile or better do you have the code available on GitHub or such? I would like to see how /app changes with and without mapping. – Mihai May 12 '19 at 20:31
  • @Mihai Thanks. I can't post the source code but I updated the first post with the client app dockerfile. – qubits May 13 '19 at 07:55
  • I understand. Your volume is actually overwriting all the work done in the build phase of the image. I am preparing a possible solution. In the meantime: with the volume on, when you get the GET error, can you see the application logs? If you run the same from inside the container does it work? It shouldn't but at least you should get an error. Or is the application not starting at all, in which case you should still get an error. Can you post any error you might have in the application logs? – Mihai May 13 '19 at 09:32

2 Answers2

5

Use nodemon to automatically restart the node server when code is changed . Before that install nodemon in your docker image and make sure it is present.

Refer this URL to install nodemon :https://www.npmjs.com/package/nodemon

then change your CMD in Dockerfile 

CMD ["nodemon", "--exec", "npm", "run", "docker-start"]

This is reload your nodejs application whenever codes are changed

Prem
  • 1,188
  • 7
  • 13
2

You might be facing several issues here, since Docker and Windows don't get along all to well unfortunately.

The cannot GET\ error is defenitely weird and should not occur. First you might want to verify that your volume was mounted correctly and all data are there after running the container.

If the working directory inside your container is empty (which might be the case) you could try to check your docker settings, whether the required drives are shared correctly.

If they are and you still cannot see any data you might want to reset your credentials. This requires you to provide your windows password to docker.

Docker Settings

The bad News

The bad news is, that apparently the inotify event (which is used to detect changes on mounted volumes) does not work with Docker on Windows yet, according to the Docker Docs. You might want to follow their recommendations on how to get around that issue.

The good News

Luckily, there are many projects which attempt to solve your problem, such as Go-Touch. I haven't verified that myself, but I hope you will benefit from them.

nullchimp
  • 735
  • 4
  • 13
  • 1
    For those reading in the future: `inotify` *does* work on Windows since release 2.2.0.0 of Docker Desktop for Windows (see [here](https://github.com/docker/for-win/issues/56#issuecomment-576749639))! – geisterfurz007 Jul 07 '20 at 09:11