Creating a new Angular app with Docker

I tried to maintain an Angular app since beginning with Docker, creating on it and turning into a docker-compose app. I used an Angular 12 app to do this.

We need Docker #

First of all I need to create Dockerfile with my Angular application.

FROM node:16-alpine3.11

RUN npm i -g npm && npm i -f @angular/cli

WORKDIR /var/app

Doing this we will have the initial container to create our application. So, we can build our container. I built my container tagging it with name “angular”

docker build -t angular .

Doing that we will have our container to create the angular app

 docker run --rm -v $(pwd):/var/app angular ng new my-testing-app --skip-git true

It will take a long time, and it will be normal. Note I used --skip-git true option. I didn’t installed git on my container. We can do this later, by the way.

That’s it! We already have our application without install angular on machine.

That machine we built will serve also to run the app

Let’s create the docker-compose.yml file right now:

version: '3.9'
networks:
  development:
services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./my-testing-app:/var/app
    networks:
      - development
    ports:
      - 4200:4200
    expose:
      - "4200"
    stdin_open: true
    environment:
      - MODE=dev
    command: [ 'ng', 'serve', '--host', '0.0.0.0' ]

Note I used the app name my-testing-app to identify my app. The docker-compose file is out of my app directory, but you could put inside the app directory, changing the volume address to . without project directory.

Done on it, we can run our docker-compose:

docker-compose up

You can go to your browser and type localhost:4200 on your address bar and, done! Up and running angular app.

You can create your api project, and all infrastructure to your app on docker-compose.yml file.

Originally published on https://medium.com/p/74819b7a9eea