setting up a reproducible dev environment for angular using rancher+docker

Our team has been having recurring problems related to local differences. We're about to start a new project, so we think it's a good opportunity to learn from our mistakes and make reproducible dev environments. I've made a little progress figuring out how to do this so far, but I'm now running into problems, so while we're still early in the process, before I build our new process wrong, I want to ask how to build it right.

We're developing an Angular site. We already have and use Rancher Desktop for managing our microservices, although the big brain behind how that all works is on another team. So, so far, what I have done is set up a basic dockerfile that does

FROM node:alpine
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install -g @angular/cli
RUN npm install
CMD ["ng", "serve", "--host", "0.0.0.0"]


Which it seems from google is fairly standard. So I build this image with Rancher Desktop and this works as a runtime environment for our app, but not so much as a development environment. For one thing, we can't run commands like ng generate component, because ng exists inside the container, not on our local machine. Also, the running angular process doesn't pick up and hotload changes we make to the source code, because those changes exist on our local machine, and the files only get copied into the container once, in the COPY step. Finally, visual studio does not pick up the outputs from npm install, so it complains about "Cannot find module @angular/core".

How can I solve these issues? Have I started off following the wrong tutorials for stuff I wasn't actually trying to do?

Continue reading...