ASP.NET Core Angular Template in Docker watching file changes

Question

I've created the ASP.NET Core Angular project with dotnet new angular and hosted in the docker.

How to look for file changes without having to reboot the docker containers again?

Dockerfile

FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim AS build
WORKDIR /app

COPY "3_UI/MyAccounts.Web/MyAccounts.Web.csproj" ./myapp/
RUN dotnet restore "./myapp/MyAccounts.Web.csproj"

COPY "3_UI/MyAccounts.Web/." ./myapp/
WORKDIR /app/myapp

# Install Node, NPM and VS Debugger
RUN apt-get update && apt-get install -y curl sudo unzip procps
RUN apt-get install -y --no-install-recommends apt-utils
RUN curl -sSL https://aka.ms/getvsdbgsh | bash /dev/stdin -v latest -l /publish/vsdbg;
RUN sudo apt-get install -y nodejs
RUN curl -L https://npmjs.org/install.sh | sudo sh
RUN echo "NODE Version:" && node --version
RUN echo "NPM Version:" && npm --version

RUN dotnet publish -c Debug -o out

FROM mcr.microsoft.com/dotnet/aspnet:5.0-buster-slim AS runtime
WORKDIR /app
EXPOSE 9000

# Install Node, NPM and VS Debugger
RUN apt-get update && apt-get install -y curl sudo unzip procps
RUN apt-get install -y --no-install-recommends apt-utils
RUN curl -sSL https://aka.ms/getvsdbgsh | bash /dev/stdin -v latest -l /publish/vsdbg;
RUN sudo apt-get install -y nodejs
RUN curl -L https://npmjs.org/install.sh | sudo sh
RUN echo "NODE Version:" && node --version
RUN echo "NPM Version:" && npm --version

# ENV ASPNETCORE_ENVIRONMENT=development
ENV ASPNETCORE_URLS=http://+:9000

COPY --from=build /app/myapp/out .

ENTRYPOINT [ "dotnet", "MyAccounts.Web.dll"]

Thought adding ENV ASPNETCORE_ENVIRONMENT=development will watch for client app file changes but it is throwing the below error after the container is up.

app_web_service                      | npmfail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! code ENOENT
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! syscall open
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! path /app/ClientApp/package.json
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! errno -2
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! enoent ENOENT: no such file or directory, open '/app/ClientApp/package.json'
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! enoent This is related to npm not being able to find a file.
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! enoent 
app_web_service                      |       
app_web_service                      | npm ERR!fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR! A complete log of this run can be found in:
app_web_service                      |       
app_web_service                      | fail: Microsoft.AspNetCore.SpaServices[0]
app_web_service                      |       npm ERR!     /root/.npm/_logs/2021-05-08T11_54_23_879Z-debug.log

Any other configurations missing to watch for file changes?

Answer 1

I am having this working but still not the optimised way. I have split .NET Core and Angular in its own container.

Angular ClientApp

# base image
FROM node:alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package*.json /app/
RUN npm install
RUN npm install -g @angular/[email protected]

# add app
COPY . /app

# start app
CMD ng serve --host 0.0.0.0 --poll 500

.NET Core App

FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim as build
ENV DOTNET_USE_POLLING_FILE_WATCHER 1
WORKDIR /app
COPY . .
RUN dotnet restore

RUN apt-get update && apt-get install -y curl sudo unzip procps
RUN apt-get install -y --no-install-recommends apt-utils
RUN curl -sSL https://aka.ms/getvsdbgsh | bash /dev/stdin -v latest -l /publish/vsdbg;

ENTRYPOINT [ "dotnet", "watch", "run", "--urls", "http://+:9000"]

Docker Compose

myaccounts.web:
    container_name: app_web
    build:
      context: ./3_UI/MyAccounts.Web/ClientApp/
      dockerfile: Dockerfile
    volumes: 
      - ./3_UI/MyAccounts.Web/ClientApp/:/app
      - '/app/node_modules'
    ports:
      - 4200:4200
    depends_on: 
        - db


myaccounts.web.service:
    container_name: api_gateway
    build:
      context: ./3_UI/MyAccounts.Web/
      dockerfile: Dockerfile
    volumes:
      - ./3_UI/MyAccounts.Web/:/app
    environment: 
      - ASPNETCORE_URLS=http://localhost:9000
      - ASPNETCORE_ENVIRONMENT=development
    ports:
      - 9000:9000
    depends_on: 
      - db