
# Hi Fellas! 👋🏽

What do you do when you need to build Angular in another environment? You are free to say 'It's working on my computer' or use container of docker instead.
Docker is an open source platform for building, deploying, and managing containerized applications.
Docker containers can simplify the process of building and deploying Angular applications.
In this post, we'll learn how to containerize angular applications with docker.



This post is divided into the following parts:

  - Create Angular App
  - Create Dist Folder
  - Create Dockerfile
  - Build Docker and run

----
# So, First We Need an Angular Application

I'm going to create an Angular Application, and first we have to install [Node](https://nodejs.org/en/) which is a Javascript Runtime Environment.

We need [NPM](https://docs.npmjs.com/getting-started) (Node Package Manager). NPM is a package manager for the JavaScript programming language. We’ll use npm to install packages or libraries.

Then, we’ll generate a new Angular project using the [Angular CLI](https://angular.io/cli). Install it globally (with the -g flag) using your command line:

```js
npm install -g @angular/cli
```

Now, we can create an Angular Application using the command line, my project name is angular-docker, and you are free to pick a name to your liking.

Create the application using **ng new** command:

```js
ng new angular-docker
```

After creating Angular Application, we go through project folder and run the application:

```js
ng serve
```

When you see the '✅ Compiled successfully' message in your command line, check the url **http://localhost:4200/**.

You will see this default welcome page:

![alt](angular-docker/welcome-page.png)

Congrats! We got a working angular application.

First part of post is done fellas!! 💪🏽

----

# Let's Create a Dist Folder

The first thing to do is to build the application and dist folder will be created.
In Angular, this is just as simple as running the following command:

```js
ng build --prod
```

When the dist folder is created, you can see static files in the dist folder.
These files are everything you need to show your application to the outside world.

If you haven't struggled so far, we can continue with the rest of the post.

----

# Create Dockerfile

First we start with creating a Dockerfile in route directory of project.


We create a layer from the node:latest Docker image with **FROM**.
> I use node latest version, you can use node specific version as node:16.13.0

```dockerfile
FROM node:latest as node
```

Bundle everything inside an application folder which is called app using below command.

```dockerfile
WORKDIR /app
```

Copy package.json and package-lock.json files of our local application folder to this app folder inside the Docker container.
Then run npm install.

```dockerfile
COPY package.json package-lock.json ./
RUN npm install
```

Copy every file.

```dockerfile
COPY . .
```

And build our project.


```dockerfile
RUN npm run build --prod
```

Alpine is the base image which is based on Alpine Linux. So, node:alpine is an Alpine Linux image with node the latest version installed.

```dockerfile
FROM nginx:alpine
COPY --from=node /app/dist/angular-docker usr/share/nginx/html
```

All Dockerfile instructions used above are gathered here:

```dockerfile
FROM node:latest as node
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=node /app/dist/angular-docker usr/share/nginx/html
```

----

# And Finally Build Docker and Run

So, let’s build and run the application with the Docker command angular-docker:

```js
docker build -t angular-docker .
docker run -d -p 4200:80 angular-docker
```

💥 Let's check **http://localhost:4200/** and see running application. That's sort of magic and docker.

-----

# So, that's all folks. We got an application which is working in docker container. Good luck with that!🤟🏾



How To Containerize Angular Applications with Docker