Dockerize Angular Application🚚

🏠 https://askudhay.com

@AskUdhay

Hello, Am Udhay (OO-dhy)

Agenda

  • Hello Docker!
  • Why Dockerize Angular app?
  • Create Angular App - Docker Image
  • Start / Run container
  • Push image to Docker Hub
  • Play with Docker Image
  • Discussion (Q/A) 

@AskUdhay

Hello Docker! 👋

@AskUdhay

  • Docker is a tool designed to make it easier to create, deploy, and run applications by 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 machine might have that could differ from the machine used for writing and testing the code.

opensource.com

Source:

Why Dockerize Angular app?

@AskUdhay

  • Setup Dev environment quickly for Angular app development using Docker.
  • Need not install Software (Node, etc.,) in the Machine, rather they run within docker container.
  • Spin multiple environments (DEV, Test etc.,) with different configurations.
  • Save cost from Cloud / Server hosting just by running the App within the Docker for DEV purpose.
  • Even you can build production ready Docker image if you don't want to host your web app files in S3 bucket or similar, rather run as container.

Container

@AskUdhay

🚚

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.

Container Image

@AskUdhay

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

@AskUdhay

  • Create a new Angular project or clone existing project from GitHub - https://github.com/askudhay/pokemon-app.
  • Create a text file called "Dockerfile" under the root of your project folder.
  • Make sure no extension is added to the file.
  • "Dockerfile" has the instructions for Docker build command to build Docker Container Image.
  • Usually we have instructions to download other images (Like node, Maven etc.,), build code and spin server.
  • Copy instructions from next slide to "Dockerfile"

🚢

Learn more..

Docker file for         project

@AskUdhay

🅰️

#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 files to NGINX HTML folder
COPY --from=build /usr/src/ng-app/dist/pokemon-app/ /usr/share/nginx/html

Docker file EXPLAINED!

@AskUdhay

  • To begin with, download Node docker image which will be used to play with ng 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 "npm i" command.
  • Copy other files and folders to working directory.
  • Build Angular app using command "npm run build". Check out scripts section in Package.json for respective ng command.
  • Download nginx server image.
  • Copy angular application from dist to nginx "html" folder path.

Build Docker container image

@AskUdhay

Execute below command to build Docker container image for our Angular application.

docker build -t poke .

Start Docker container 

@AskUdhay

Execute below command to start the docker container to run the application.

docker run -dp 3000:80 poke

Push docker image to Docker Hub

@AskUdhay

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.

 

1. Go to Docker Hub - https://hub.docker.com/ and log in if you need to.

2. Click the Create Repository button.

3. For the repo name, use getting-started. Make sure the Visibility is Public.

4. Click the Create button!

Push docker image to Docker Hub

@AskUdhay

Execute below commands one by one to push docker image to Docker Hub. Make sure you update

# Create Image matching your Repo using TAG command
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

@AskUdhay

Step 1: Login to "Play with Docker" - https://labs.play-with-docker.com/ (You need to have Docker account. Signup!)
Step 2: Click on "Start"
Step 3: Click on "Add new instance" to launch New instance
Step 4: Run below command in the Web terminal. 

docker run -dp 3000:80 askudhay/poke

Step 5: The above command pulls the Pokemon App Docker image and serve it on Port 3000
Step 6: Click on "3000" link appears next to "Open Port" button.

Yay!..

@AskUdhay

@AskUdhay

@AskUdhay

Useful links

https://www.docker.com/resources/what-container

https://www.docker.com/get-started

https://www.docker.com/products/docker-desktop

https://labs.play-with-docker.com/

https://hub.docker.com/repository/docker/askudhay/ng-pokemon

ngThanks!

Dockerize Angular Application 🚚

By Udhayakumar G

Made with Slides.com

Dockerize Angular Application 🚚

This is my recent talk for Angular Online Meetup on "How to dockerize Angular app?". Reach me @askudhay on Twitter. Happy learning! Thanks.

  • 2,878

More from Udhayakumar G