Dockerized Ionic app hot reload not working

Question

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

Can you share the logs? by doing docker logs <container_name_or_id>. — Abdullah Shah
– Abdullah Shah, Commented Feb 12, 2018 at 14:36
@tgogos I used docker-compose build and docker-compose up — Thinker
– Thinker, Commented Feb 12, 2018 at 14:39
@tgogos I tried that but same issue. I have updated my question with outputs of both the commands — Thinker
– Thinker, Commented Feb 12, 2018 at 14:49

β.εηοιτ.βε · Accepted Answer · 2019-10-08 16:50:20Z

1

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)

edited Oct 8, 2019 at 16:50

β.εηοιτ.βε

40.3k14 gold badges81 silver badges104 bronze badges

answered Oct 8, 2019 at 16:29

Kilian

616 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan J Mohite · Accepted Answer · 2018-02-12 15:22:14Z

0

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.

answered Feb 12, 2018 at 15:22

Rohan J Mohite

2,6231 gold badge14 silver badges19 bronze badges

5 Comments

Thinker Over a year ago

Can I modify my dockerfile or compose file to enable hot reload? Because I do not want to rebuild containers to see HTML or CSS changes

Rohan J Mohite Over a year ago

You can mount directory (shared folder between your windows machine and Docker container). If you do this then you don't need to re-build container. Please let me know if you need help with this? Can I ask you why you are using Docker to run an ionic app?

Thinker Over a year ago

At the moment just so that other developers don't have to setup everything on their machines. They would simply clone the repo and with two commands they are good to go. It will be great if you could help me modify my dockerfile or compose file :)

Rohan J Mohite Over a year ago

I just did the google and found rominirani.com/… link. Just try this if it's work. actually, you need a similar mechanism to share your source code folder in between windows and docker container.

Thinker Over a year ago

Isn't the line .:/opt/library in docker-compose file doing the same thing? I have a docker-compose file for my angular project where hot reload works:

version: '2'   services:     # Build the container using the client Dockerfile   client:         image: node:7         command: bash -c "cd /app && npm install && npm start"         volumes:             - D:/Development/personal_projects/library-owner-frontend:/app         ports:              - "4200:4200"

Giacomo Brunetta · Accepted Answer · 2020-12-04 21:10:08Z

0

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”

answered Dec 4, 2020 at 21:10

Giacomo Brunetta

1,5853 gold badges23 silver badges41 bronze badges

Collectives™ on Stack Overflow

Dockerized Ionic app hot reload not working

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related