Skip to content

Latest commit

 

History

History
155 lines (101 loc) · 4.03 KB

README.md

File metadata and controls

155 lines (101 loc) · 4.03 KB
Raw

Develop Angular Project inside Docker for Beginners

By: Mark Dionnie Bulingit

Setup Angular environment on Windows

  1. Install NodeJS

https://nodejs.org/en

  1. Install Angular CLI
  npm i @angular/cli
  1. Create New Project named angular-docker-demo
  ng new angular-docker-demo --skip-install

Setup Docker on Windows

  1. Install Docker Desktop

https://docs.docker.com/desktop/install/windows-install/

  1. Enable CPU virtualization in your system BIOS - turning your processor into a powerhouse for running multiple operating systems and applications seamlessly.

https://www.bleepingcomputer.com/tutorials/how-to-enable-cpu-virtualization-in-your-computer-bios/

Setup Docker in Project with VSCode

Note: It is important that Docker Desktop is running on the background and you're signed in on it while working on Docker files

Install top VSCode extensions for Angular and Docker.

Reference: https://blog.cloudboost.io/developing-angular-applications-using-docker-6f4835a75195

  1. Go to the project root and create a Dockerfile file.
FROM node:18-alpine
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app/
RUN ["npm", "install"]
COPY . /app
EXPOSE 4200/tcp
CMD ["npm", "start", "--", "--host", "0.0.0.0", "--poll", "500"]
  1. Login to Docker via Terminal, Make sure to run all commands on Powershell.
docker logout
docker login -u "mbulingit" -p "#PlmO***b123" docker.io
  1. Build image base on Dockerfile
docker build -t angular-docker-demo-dev .
  1. Run a docker container base on the image built.
docker run -it --rm -p 4200:4200 -v ${pwd}/src:/app/src angular-docker-demo-dev
  1. Go to http://localhost:4200/ and start developing with live reload.
docker run -it --rm -p 4200:4200 -v ${pwd}/src:/app/src angular-docker-demo-dev

Sharing Docker Image to others via DockerHub.

Install top VSCode extensions for Angular and Docker.

  1. Tag your Docker Image
docker tag angular-docker-demo-dev mbulingit/angular-docker-demo-dev
  1. Push you Docker Image to the Hub
docker push mbulingit/angular-docker-demo-dev

Docker Notes:

Modifications outside src/ folder e.g package.json requires rebuild of image & container and repush on docker hub

  1. Stop Container
docker stop angular-docker-demo-dev
  1. Delete Container
docker rm angular-docker-demo-dev
  1. Delete Image
docker rmi angular-docker-demo-dev
  1. Repush Image to DockerHub
docker build -t angular-docker-demo-dev .

Creating a distribution version of your app:

docker run -it --rm -v ${PWD}/src:/app/src -v ${PWD}/dist:/app/dist angular-docker-demo-dev npm run build

Explanation:

Command Current Directory Container Usage
docker run Run a docker container
-it Allocates a pseudo-TTY. This is often used for an interactive shell.
--rm Ensures that each time a container is run, it is removed as soon as it finishes its task, for CI/CD processes.
-v Mount a directory. Any changes made in one location are reflected in the other.
-v ${PWD}/src:/app/src /src /app/src ${PWD} gets the absolute path of project root directory e.g C:\Users...\angular-docker-demo\
-v ${PWD}/dist:/app/dist /dist /app/dist
angular-docker-demo-dev Docker image name
npm run build Compiles the source code and outputs the /dist folder which can be deployed to hosting platform like Vercel.

In the .gitnigore of the project, remove /dist if you want to deploy app as pre-built and avoid running hosting parform CI commands e.g installing dependencies (Vercel won't allow this at this moment).

Tips

Docker: How do I add myself to the docker-users group on Windows?

net localgroup docker-users "your-user-account-name" /ADD