DEV Community

Cover image for Angular Development on VS code and Docker using Remote Containers
Srini Raju
Srini Raju

Posted on

Angular Development on VS code and Docker using Remote Containers

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.
Image of VS code palette

  1. Select Remote-Containers: Add Development Container Configurations Files..
  2. Select Nodejs & Typescript
  3. 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 .


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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'],


Enter fullscreen mode Exit fullscreen mode

New Code



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


Enter fullscreen mode Exit fullscreen mode

Now tests should run as expected. So we are good to develop the application with Unit testing.

Find the git Repo

Waiting for your comments and feedback

Top comments (1)

Collapse
 
imjoaquincorimayo profile image
Joaquín Corimayo

Ty!