Angular app Docker Container for development with Visual Studio Code
when people talk about docker, mostly they talk about deployment. Just create a docker image and push it to Azure/Aws and deploy it. Now we are not going to see about deployment.
Then ???
We are going to see how we can use docker for the development environment with visual studio code.
How should we use docker for development?
No need to worry about local setup. just pull the code and start the docker container.
what is the local setup here?
If you are going to use the angular app and required local setup, need to install the following things in your local system
Node Js — expected version
Angular CLI — expected version.
install required visual studio code extensions for formating
Instead of installing all the required, will create a docker container one time and use it for local setup. Do you believe it? we will see how to do it.
Pull your angular app from GitHub. My example app will add at the end of this blog. this is my example app opened in visual studio.
Install the Visual Studio Code — Dev Containers extension
Press F1 to open the Command Palette.
Type add dev container and select Dev Containers: Add Development Container Configuration Files.
Select Node.js & Typescript
Select the version of the node, in my case I selected 16,
Select angular CLI and click ok.
Now, it created .devcontainer/devcontainer.json in the root folder
add “postCreateCommand”: “npm install”
After the docker image is created, it will do an npm install inside the docker image and inside the app.
Then add configuration for vscode, like extensions. How to add an extension,
now I want to add an Angular Language Service extension. then search extension in visual studio, then click marketplace, it will take you marketplace of visual studio code. Search Unique Identifier, then you get the id of the extension, then add extensions, in the extension block.
"customizations": { "vscode": { "settings": {}, "extensions": [ "Angular.ng-template"] }}
Now, When you make changes in a file, it should detect changes and reflect them in your browser. then you have to update ng serve command
“start”: “ng serve --poll 2000”poll param to help detect changes in the docker container environment.
one-time setup is done.
If a new developer comes to your team, don’t ask him to do the local setup. ask him to follow the below steps.
Open Container and start working on Project
Take the latest changes from git
and install Docker locally. open it
in visual studio code, Press F1 and select Dev Containers: Reopen in Container
Loading screen of dev container
If you notice the right corner, it mentioned Dev container: Node.js & Typescript. If you open a terminal, the location of the terminal is node ➜ /workspaces/docker-container-for-development-example.
I don’t have node.js locally. In the docker dev environment, it shows the node version.
Then Do npm run start
so it shows that output here.
Once you completed the work,
press F1 in the visual studio code, select Dev Containers: Reopen Folder Locally
repo will open locally. then you can push your changes to the repo.
When you are working on multiple projects, you don’t worry about the environment. you can keep installing docker and dev container extensions in visual studio code, switch projects then work on the project.
Don’t worry about the environment setup. Think about logic coding.
Example added here
Happy Coding!!!