docker - Dockerized Ionic app hot reload not working

4
votes

I had an existing Ionic app which I have dockerized. The build and up commands are successful and I can access the app at http://localhost:8100/ionic-lab. However, hot reload doesn't work. Whenever I edit an HTML or CSS, those changes are nor reflected.

My dockerfile:

FROM node:8
COPY package.json /opt/library/
WORKDIR /opt/library
RUN npm install -g cordova ionic && cordova telemetry off 
# && echo n | ionic start dockerized-ionic-app --skip-npm --v2 --ts
RUN npm install && npm cache verify
COPY . /opt/library
#CMD ["ionic", "serve", "--all"]

And docker-compose.yml:

app:
  build: .
  ports:
    - '8100:8100'
    - '35729:35729'
  volumes:
    - .:/opt/library
    - /opt/library/node_modules
  command: ionic serve --lab

Why is it happening? What is missing?

UPDATE:

Output of docker-compose build --no-cache

D:\Development\personal_projects\library>docker-compose build --no-cache
Building app
Step 1/6 : FROM node:8
 ---> b87c2ad8344d                                                                                                      Step 2/6 : COPY package.json /opt/library/
 ---> 4422d0333b92
Step 3/6 : WORKDIR /opt/library
Removing intermediate container 1cfdd60477f9                                                                             ---> 1ca3dc5f5bd6                                                                                                      Step 4/6 : RUN npm install -g cordova ionic && cordova telemetry off
 ---> Running in d7e9bf4e6d7b
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/ionic/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
+ [email protected]
added 660 packages in 29.173s
You have been opted out of telemetry. To change this, run: cordova telemetry on.
Removing intermediate container d7e9bf4e6d7b
 ---> 3fedee0878af
Step 5/6 : RUN npm install && npm cache verify
 ---> Running in 8d482b23f6bb
> [email protected] install /opt/library/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-57_binding.node
Download complete
Binary saved to /opt/library/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /root/.npm/node-sass/4.5.3/linux-x64-57_binding.node

> [email protected] postinstall /opt/library/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall /opt/library/node_modules/node-sass
> node scripts/build.js

Binary found at /opt/library/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 548 packages in 30.281s
Cache verified and compressed (~/.npm/_cacache):
Content verified: 1476 (55779072 bytes)
Index entries: 2306
Finished in 9.736s
Removing intermediate container 8d482b23f6bb
 ---> 5815e391f2c6
Step 6/6 : COPY . /opt/library
 ---> 5cc9637a678c
Successfully built 5cc9637a678c
Successfully tagged library_app:latest

D:\Development\personal_projects\library>

And output of docker-compose up:

D:\Development\personal_projects\library>docker-compose up
Recreating library_app_1 ... done
Attaching to library_app_1
         Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser --lab - Ctrl+C to cancel
app_1  | [14:45:19]  watch started ...
app_1  | [14:45:19]  build dev started ...
app_1  | [14:45:19]  clean started ...
app_1  | [14:45:19]  clean finished in 78 ms
app_1  | [14:45:19]  copy started ...
app_1  | [14:45:19]  deeplinks started ...
app_1  | [14:45:20]  deeplinks finished in 60 ms
app_1  | [14:45:20]  transpile started ...
app_1  | [14:45:24]  transpile finished in 4.54 s
app_1  | [14:45:24]  preprocess started ...
app_1  | [14:45:24]  preprocess finished in 1 ms
app_1  | [14:45:24]  webpack started ...
app_1  | [14:45:24]  copy finished in 5.33 s
app_1  | [14:45:31]  webpack finished in 6.73 s
app_1  | [14:45:31]  sass started ...
app_1  | [14:45:32]  sass finished in 1.46 s
app_1  | [14:45:32]  postprocess started ...
app_1  | [14:45:32]  postprocess finished in 40 ms
app_1  | [14:45:32]  lint started ...
app_1  | [14:45:32]  build dev finished in 13.64 s
app_1  | [14:45:32]  watch ready in 13.73 s
app_1  | [14:45:32]  dev server running: http://localhost:8100/
app_1  |
         [OK] Development server running!
app_1  |      Local: http://localhost:8100
app_1  |      External: http://172.17.0.2:8100
app_1  |      DevApp: library@8100 on 1643dcb6c0d7
app_1  |
app_1  | [14:45:35]  lint finished in 2.51 s
3
dockerionic-frameworkionic2docker-compose
Can you share the logs? by doing docker logs <container_name_or_id>. – Ahab
@tgogos I used docker-compose build and docker-compose up – Thinker
@tgogos I tried that but same issue. I have updated my question with outputs of both the commands – Thinker
Which OS are you using? – Tarun Lalwani
Im on Windows 10 and have Docker for windows – Thinker

3 Answers

1
votes

Your Dockerfile and Docker-Compose does exactly what is needed.
With the - .:/opt/library line the volume gets mounted correctly and your local changes will take effect in the container as well.

If you are on Windows the problem is that Hyper-V is not capable of propagating local file changes correctly into the container. Therefore the serve program is not able to catch file changes.

The solution is to use ng serve directly and enable polling by running ng serve with the poll flag: ng serve --poll 200 --host=0.0.0.0 --port=8100.

  • --poll 200 is looking actively for file changes every 200ms
  • --host=0.0.0.0 set the host. 0.0.0.0 is used to be reachable from other containers
  • --port=8100 is used to get the same port as ionic serve uses (just for convinience)
0
votes

You said "hot reload doesn't work", this is correct.

if you re-build docker container then only you will see code changes, because your source code needs to get copy inside your docker-container.

just run docker-compose up -d or rebuild docker container then you should see your code changes.

0
votes

You are mapping local 8100 port with cointainer 8100 port, this is ok. You are running ionic from a container, in an External way. Try with “ionic serve --external”