Develop Angular App inside Container - lakshmansha/ngAngularPractices GitHub Wiki

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will Develop Angular App inside Container.

Pre-requisites:

The pre-requisites are

Node.JS - Click Here
Angular CLI - Click Here
Install Docker - Click Here
VS Code - Click Here
Remote - Containers Click Here

Once Install Docker & Node.JS install Angular CLI via NPM Package Manager.

Implementation:

Step 1: Setup Docker For Dev.

To Setup Docker for Angular App for Development, Please refer the below,

Blog - Click Here
Video - Click Here

As small Setups,

Copy the DockerFile.dev via URL
Set Start Script as below
```
"start": "ng serve --host 0.0.0.0"
```

To Build run below command,

docker build -t <appN-name>:dev -f Dockerfile.Dev .

Run the Container use below command,

docker run -it --rm -p 9001:4200 -v ${PWD}/src:/usr/src/app/src --name <container-name> <app-name>:dev

Step 2: Setup Remote Container.

Open VS Code Extensions, Search for Remote Container and Install it,

After Installed, Able to view icon left-bottom as below,
Once you Click on it, It will pop-up option as below,
Select your Angular App Container as below,
Then Open App Folder in VS Code Explorer will show as below,
Start Coding in Angular App,

NOTE: Your Code change in Src Folder only will be affected on Main Code Base. All other Changes need to implement manually, such as Added Option New NPM Package won't affect.

If you need to install NPM Package add that package information in package.json file, then rebuild the Docker Image and Run it.

On Every Source code change inside container it will reload the App in browser.

You may also access to source on GitHub by Click Here

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.