Docker container does not reload Angular app
I have a problem with ng serve
in my docker container running docker-compose
.
Dockerfile
FROM node:7.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app
EXPOSE 4200
CMD [ "npm", "start" ]'
And my docker-compose.yml
web:
build: .
ports:
- '8089:4200'
volumes:
- .:/usr/src/app/
environment:
- NODE_ENV=dev
command: bash -c "npm start"
Everything works fine when I run it, but the edit file does not cause the application to reload. The file has changed, I'm sure, because I am checking it over the ssh connection and editing the file in the container. When the container is restarted again, each change is applied. I thought that when I switch from the docker-only construction image to compose this, it will disappear, but don't.
When I call touch the file from docker exec
webpack
, reload the whole file and it works without reloading the container.
Anyone have a solution?
source to share
I found a solution for both problems:
-
inotify -> just edit
package.json
in the"scripts"
section of this line:"start": "ng serve --host 0.0.0.0 --poll"
required for windows host only, -
hot reboot -> add
expose 49153
inDockerfile
and ports- '49153:49153'
indocker-compose.yml
as @kstromeiraos mentioned.
source to share
Webpack uses a port to actively reload the application. By default, this port 49153
.
You have to open and bind this port in the container to the host port and that should solve your problem.
So add this to your Dockerfile
.
FROM node:7.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app
EXPOSE 4200 49153
CMD [ "npm", "start" ]'
And it's on yours docker-compose.yml
.
web:
build: .
ports:
- '8089:4200'
- '49153:49153'
volumes:
- .:/usr/src/app/
environment:
- NODE_ENV=dev
command: bash -c "npm start"
source to share
My solution using node: thin.
No need to copy data to containers. Just use volumes.
Dockerfile:
NOTE :--poll 1
FROM node: slim RUN npm install @ angular / cli @ latest -g RUN mkdir -p / home / boilerplate WORKDIR / home / boilerplate EXPOSE 4200 CMD ng serve --port 4200 --host 0.0.0.0 --poll 1
Write:
project:
image: project
build:
context:.
dockerfile: projectdir / Dockerfile
volumes:
- ./projectdir:/home/boilerplate
ports:
- 4200: 4200
source to share
Another solution without polling.
Reference Information:
I work on large Angular and React projects, polling even every 10 seconds ( --poll 10000
) generates a lot of network traffic (in the task manager you can check the performance of the docker nat interface). And this, in turn, leads to high CPU utilization.
Decision:
If you are using phpStorm / other Intellij product or VS Code you can add file watchers. I wrote the following script to help me with this:
#!/bin/bash
image="${*:1:1}"
file="${*:2}"
machine=$(docker ps --filter ancestor="$image" --format "{{.ID}}")
if [ -n "$machine" ]
then
docker exec "$machine" touch "$file"
fi
After that, I added the following File Watcher (note that the trigger is disabled on external events):
Notes:
It is important that yours docker exec
does not have a parameter -it
, since tty or interactive options require use winpty
(found where git bash is installed). Also this solution is not Angular specific, it is more docker specific, works the same for any webpack-dev-server application.
In addition, phpStorm periodically displays a File Cache Conflict
file difference dialog . To turn off this hint, you can turn off file syncing. fooobar.com/questions/369001 / ...
source to share
The solution could be the chokidar wrapper, which is a dependency on angular packaging. I don't know if this was the status in 2017. You don't need to expose any additional ports. Just use an environment variable in your docker-compose.
Basic configuration:
Dockerfile
CMD ng serve --host 0.0.0.0
docker-compose.yml
environment:
- CHOKIDAR_USEPOLLING=true
This should restart your browser. Tested on Chrome and Angular 8
Package for further study: https://github.com/paulmillr/chokidar
source to share