Angular Development on VS code and Docker using Remote Containers

#vscode #angular #docker

VS Code with Remote Containers extension will help us develop with in container. More details are here

I decided to try angular development using VS Code Docker containers. This is my Journey Hope it helps others.

prerequisite:

Docker
VS Code with Visual Studio Code Remote - Containers

Step 1: Create a New Project and Start in a container.

Start VS code in a brand new folder(say AngularOnRC). Open Command palette by pressing F1. Follow this naviation.

Select Remote-Containers: Add Development Container Configurations Files..
Select Nodejs & Typescript
Select node version as 16. This will add files in .devcontainer and the VS code will prompt to restart in Docker Container. Restart in docker container.(If you miss the prompt you use command Palette for the same)

Step 2: Initialize an Angular project.

Once the Project starts in Container(starting may take some time). Open the terminal and Run the following Commands.

npm install -g @angular/cli
ng new AngularOnRC --directory .

Choose the values of our preference for angular project.

Step 3: Run the Project

Run the angular project using the following command.

npm run start

This would prompt you to open in Browser. Now you can see you application Running.

This proves that basic angular project development works but the problem starts when we want to run unit tests.

npm run test

The issue is due to the fact that docker on which we are developing do not have chrome installed.

Step 4: Add chrome to Dockers

Add the following code to Docker file in .devcontainer

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     && apt-get -y install --no-install-recommends chromium
ENV CHROME_BIN=/usr/bin/chromium

Now from command palette choose the rebuild container option this will rebuild docker by adding chrome.

Step 5: Change karma config.

In karma.conf.js file change browser config shown as below.

Old Code

browsers: ['Chrome'],

New Code

browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
  ChromeHeadlessNoSandbox: {
    base: "ChromeHeadless",
    flags: [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ]
  }
},