Develop Angular App inside Container
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
json "start": "ng serve --host 0.0.0.0"
- To Build run below command,
powershell docker build -t <appN-name>:dev -f Dockerfile.Dev .
- Run the Container use below command,
powershell 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.
Comments
Post a Comment