Docker Assignments #19: Dockerizing an Angular Application using Dockerfile and Docker Compose

1.  Create new scaffolding angular application using ng new command
2.  Validate folder structure as per below image in the host machine

3. 

4. Set default host for ng serve in package.json file
5. Configure Dockerfile with below instructions

• set base image as "node:12.7-alpine"
• set working directory as "/usr/app"
• write command to copy package.json
• write command to run npm install
• write command to copy all files from host machine into an image
• expose Port 4200
•  set CMD command to execute npm run start

      6. Write following instructions in docker-compose yml file

• Configure "dockerangular-service" service by specifying build context as Dockerfile
• specify bindmount to /usr/app container path
• specify volume mount to /usr/app/node_modules
• Expose port 4200
• Set command as "npm run start"

    7. Spin up container using docker-compose up command
    8. check http://localhost:4200

Step 1: 

   > ng new docker-angular

Step 4: 

"scripts": {    

    "start": "ng serve --host 0.0.0.0"    

  }

 

Step 5:

FROM node:12.7-alpine

WORKDIR /usr/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 4200

CMD ["npm", "run", "start"]

Step 6:

version: '3'

services:

    dockerangular-service:

      build: .

      volumes:

        - .:/usr/app

        - /usr/app/node_modules

      environment:

        NODE_ENV: development

      ports:

        - 4200:4200

      command: "npm run start"

Step 7:

  > docker-compose up

we can even spin up docker containers by right click on docker-compose.yml in vscode and select "Compose up" option

Source code available under https://github.com/ramasubbareddy1224/docker-angular

Happy Coding :)