Hello nice people👋, welcome back!
This post is all about dockerizing an Angular application, and I will go through the step-by-step approach from creating a Docker image for an Angular app to Spinning the docker container.
To explore it in your machine, you need Docker installed as a first thing. If you can't install Docker, no worries, jump onto this section.
How to install docker in Windows?
Say "Hello" to Docker 👋
- Docker is a tool designed to make it easier to create, deploy, and run applications using containers.
- Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package.
- By doing so, thanks to the container, the developer can rest assured that the application will run on any other Linux machine regardless of any customized settings that the machine might have that could differ from the machine used for writing and testing the code.
Why dockerize an Angular app? 🤔
- Docker helps in setting up Dev environment quickly for Angular app development.
- Need not install Node.js, npm, and other tools in Machines, rather they are all available in Docker container once you spin the Docker image.
- You can spin multiple environments (Dev, Test, etc.,) with different configurations. No physical servers are needed.
- Save cost from Cloud / Server hosting just by running the App within the Docker for DEV purposes.
- Even you can build a production-ready Docker image if you don't want to host your web app files in an S3 bucket or similar, rather run as a container.
What is a Docker container? 🚚
A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.
Source: https://www.docker.com/resources/what-container
What is a Container Image? 🖼️
A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries, and settings.
Create a docker file🚢
It's time to get our hands dirty.
- Create a new Angular project or clone existing project from GitHub - https://github.com/askudhay/pokemon-app.
- Create a file called "Dockerfile" under the root of your project folder.
- Make sure no file extension is added to the file.
- "Dockerfile" has the instructions for Docker to build Container Image.
- Usually we have instructions to download docker images (Like node, Maven, etc.,), building code, and spin server.
- Copy below instructions to "Dockerfile"
#Download Node Alpine image
FROM node:12.16.1-alpine As build
#Setup the working directory
WORKDIR /usr/src/ng-app
#Copy package.json
COPY package.json package-lock.json ./
#Install dependencies
RUN npm install
#Copy other files and folder to working directory
COPY . .
#Build Angular application in PROD mode
RUN npm run build
#Download NGINX Image
FROM nginx:1.15.8-alpine
#Copy built angular app files to NGINX HTML folder
COPY
Learn more about Dockerfile here .
Dockerfile explained 🗄️
- To begin with, download Node Docker image which will be used to execute Angular CLI commands, and also download npm dependencies for the project.
- Set up the working directory to let know Docker about the context.
- Initially copy package.json to the working directory.
- Install npm dependencies using the "npm i" command.
- Copy other files and folders to the working directory.
- Build Angular app using command "npm run build". Check out the scripts section in Package.json for the respective ng command.
- Download Nginx server image.
- Copy angular application files from dist folder to Nginx "html" folder.
Build Docker container image 🏭️
Execute the below command to build a Docker container image for our Angular application.
docker build -t poke .
Start Docker container 🚍️
Execute the below command to start the docker container to run the application.
docker run -dp 3000:80 poke
Just note that the Docker container will serve the application at port 3000 which in turn is served internally by Nginx at port 80.
Push docker image to Docker Hub 🏡
Okay, it's time to push the image we created to Docker Hub.
To push an image, we first need to create a repo on Docker Hub.
Go to Docker Hub - https://hub.docker.com/ and login if you need to.
Click the Create Repository button.
For the repo name, use "Poke". Make sure the Visibility is Public.
Click the Create button!
Execute the below commands one by one to push the docker image to Docker Hub.
# Create Image matching your Repo using the TAG command. This creates a tag called "latest".
docker tag poke:latest [DOCKER-ACCOUNT-NAME]/poke:latest
# Push the image to Docker Hub
docker push [DOCKER-ACCOUNT-NAME]/poke:latest
Play with docker image just pushed 🧝
Step 1: Log in to "Play with Docker" - https://labs.play-with-docker.com/ (You need to have a Docker account. Signup!)
Step 2: Click on "Start"
Step 3: Click on "Add new instance" to launch New instance
Step 4: Run the below command in the Web terminal. Replace it with your Docker ID and image name if needed.
docker run -dp 3000:80 askudhay/poke
Step 5: The above command pulls the Pokemon App Docker image and serves it on Port 3000
Step 6: Click on the "3000" link that appears next to the "Open Port" button. You should the app opened in a new tab.
My "Pokemon" Angular app docker image can be found here.
Watch on YouTube
Hope you find this article useful, please feel free to share it with your friends/colleagues.
If you got any questions, feel free to post them in the comments section down below.
Happy learning!
I tweet a lot about Web development, Java, and Productivity Hacks, so feel free to follow me on Twitter at AskUdhay.
Here is one of my recent tweets:
References:
https://www.docker.com/get-started
https://www.docker.com/products/docker-desktop
https://labs.play-with-docker.com/
