How to configure `ng serve` to catch changes in a dockersized Angular 2 app?

Question

I am 'dockersizing' (I hope this is the right term) an existing Angular 2 app, running on angular-cli (1.0.0-beta.31).

I am struggling to find a way to make ng serve catch whenever I update a file in my working directory and therefore - refresh my app (as usual). Otherwise, I need to docker-compose up --build every time I change a file...

EDIT: The idea I'm exploring is to add a volume.

Here's my Dockerfile:

# Dockerizing Angular 2 Client App
# @link: https://scotch.io/tutorials/create-a-mean-app-with-angular-2-and-docker-compose

# Create image based on the official Node 7 image from dockerhub
FROM node:7

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
# **EDIT**: comment out this, so I can set-up a volume
# COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

Here's my docker-compose.yml:

# specify docker-compose version
version: '2'

# Define the services/containers to be run
services:
  angular2app: # name of the service
    build: ./ # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    # **EDIT**: Setting-up the volume here
    volumes:
      - .:/usr/src/app

EDIT: Without the volume config - the app builds and runs successfully. After setting up the volume, error output:

Building angular2app
Step 1/7 : FROM node:7
 ---> b3a95b94bd6c
Step 2/7 : RUN mkdir -p /usr/src/app
 ---> Using cache
 ---> 2afb01ffe055
Step 3/7 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 44d08fdb4a19
Step 4/7 : COPY package.json /usr/src/app
 ---> Using cache
 ---> 87bb4f71c13c
Step 5/7 : RUN npm install
 ---> Using cache
 ---> ba88a0e1e480
Step 6/7 : EXPOSE 4200
 ---> Using cache
 ---> 4fddacae8486
Step 7/7 : CMD npm start
 ---> Using cache
 ---> c5ac29bf85fc
Successfully built c5ac29bf85fc
Creating minterface_angular2app_1

ERROR: for angular2app  Cannot start service angular2app: Mounts denied: closed
ERROR: Encountered errors while bringing up the project.

How to configure ng serve to catch changes in my current working directory and to re-build my Angular 2 app?

PS: I am with docker-compose version 1.11.1 (build 7c5d5e4), running on Mac (Sierra 10.12.3) via Docker for Mac.

Answer 1

I had a similar issue. Webpack was not watching for changes. See https://webpack.js.org/configuration/watch/

Inside webpack.common.js, you can add

watchOptions: {
   poll: 1000, // a poll interval in milliseconds
},

Answer 2

This may not be the answer you are after, but it is how we solve this problem in our dev workflow:

1. Don't run ng serve in docker. Run it on your host. This way you avoid all the bugs of file sharing with docker. And you will hit them for sure, there are known issues with file changes on host propagating to Docker VM.

2. Setup a reverse proxy in docker-compose that proxies requests to your backend and angular project. Most probably, you already are doing that.

   web:
     image: nginx
     ports:
       - "80:80"
     links:
       - backend
     extra_hosts:
       - "frontend:192.168.99.1"
   

   Note that, instead of linking to frontend, we specify extra_hosts to point to our host IP address.

3. Add the IP address to your lo0 interface on host, so that it is accessible from inside docker VM.

   sudo ifconfig lo0 inet 192.168.99.1/32 add
   

   This setting doesn't persist on a restart, so you will do it again.

The only thing to take care of here is to select a sane IP address to avoid conflicts with your local network and any VPN software you may be using.

Hope this helps.

Answer 3

You can use this npm package: https://www.npmjs.com/package/supervisor Just run the process using that supervisor process and specify which folders it should watch -w for changes and restart.

Hope that helps!