Containerizing Angular project with Docker

Question

I've recently learned how to use Docker and am trying to containerize an Angular project that I've been working on.

The project's package.json is as following:

{
"name": "argon-dashboard-angular",
"version": "1.0.1",
"scripts": {
  "ng": "ng",
  "start": "ng serve --port 8080",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"private": true,
"dependencies": {
  "@angular/animations": "7.2.4",
  "@angular/common": "7.2.4",
  "@angular/compiler": "7.2.4",
  "@angular/core": "7.2.4",
  "@angular/forms": "7.2.4",
  "@angular/http": "7.2.4",
  "@angular/platform-browser": "7.2.4",
  "@angular/platform-browser-dynamic": "7.2.4",
  "@angular/router": "7.2.4",
  "@ng-bootstrap/ng-bootstrap": "4.0.1",
  "bootstrap": "4.1.3",
  "chart.js": "2.7.3",
  "clipboard": "2.0.4",
  "core-js": "2.6.4",
  "ngx-clipboard": "11.1.9",
  "ngx-toastr": "9.1.2",
  "nouislider": "13.1.1",
  "rxjs": "6.4.0",
  "zone.js": "0.8.29"
},
"devDependencies": {
  "@angular-devkit/build-angular": "0.13.1",
  "@angular/cli": "7.3.1",
  "@angular/compiler-cli": "7.2.4",
  "@angular/language-service": "7.2.4",
  "@types/jasmine": "3.3.8",
  "@types/jasminewd2": "2.0.6",
  "@types/node": "11.9.0",
  "codelyzer": "4.5.0",
  "jasmine-core": "3.3.0",
  "jasmine-spec-reporter": "4.2.1",
  "karma": "4.0.0",
  "karma-chrome-launcher": "2.2.0",
  "karma-coverage-istanbul-reporter": "2.0.4",
  "karma-jasmine": "2.0.1",
  "karma-jasmine-html-reporter": "1.4.0",
  "protractor": "5.4.2",
  "ts-node": "8.0.2",
  "tslint": "5.12.1",
  "typescript": "3.2.4"
  }
}

My Dockerfile is as following:

FROM node:10.18.0-alpine AS build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
CMD ["npm","start"]
EXPOSE 8080

I build from the image and run my container:

docker build .
docker run <container-id>

Once the container is running, I tried to access http://localhost:8080 , but the browser reads "localhost refused to connect".

Also, my Docker Desktop app shows these buttons next to my container:

Usually there would be another button to the left that opens the container in my browser at its port.

Also, after looking through some tutorials, I noticed that many suggested using an Nginx Docker image to serve my web app. Is this necessary? Why can't I serve my app through ng serve ?

The dev server isn't designed for production use. You're better off with a multi-stage build where the Node container runs ng build and the result is served by e.g. Nginx. This will also result in a substantially smaller container (the Nginx image is much lighter than any Node, and you won't need node_modules etc.). — jonrsharpe, Jul 08 '20 at 07:10
Try to move `EXPOSE 8080` this line above in the dockerfile and then try to `docker restart ` — Dupinder Singh, Jul 08 '20 at 07:11
Does this answer your question? [ng serve not working in Docker container](https://stackoverflow.com/questions/46778868/ng-serve-not-working-in-docker-container) — Dupinder Singh, Jul 08 '20 at 07:14
Did you map port while running the Docker container? https://docs.docker.com/engine/reference/commandline/run/ option --publish-all , -P — Andrzej Sydor, Jul 08 '20 at 09:52
@jonrsharpe I see. So will the Nginx image be used only for production, or can I use it for my dev environment as well? — wO_o, Jul 08 '20 at 16:00
Just for prod. If you want to do dev in a container you'd set it up completely differently, e.g. mounting directories into it rather than copying files. — jonrsharpe, Jul 08 '20 at 16:03
@DupinderSingh I tried both suggestions, did not change anything. — wO_o, Jul 08 '20 at 16:13
@AndrzejSydor calling `docker run --publish-all -P ` did the trick, thank you! — wO_o, Jul 08 '20 at 16:14
@jonrsharpe one more question, so would it make sense to maintain two Dockerfiles: one for dev, another for prod? Looking at this page https://docs.docker.com/develop/develop-images/multistage-build/ it sounds like having two Dockerfiles isn't ideal. — wO_o, Jul 08 '20 at 16:22

Andrzej Sydor · Answer 1 · 2020-07-08T09:53:57.530

0

For building purpose it's better to use Multistage building like below:

FROM node:10 AS builder

WORKDIR /app
RUN npm install -g @angular/cli
RUN ng new my-app --routing=true --style=css --skipGit=true --minimal=true
WORKDIR /app/my-app
RUN ng build --prod

FROM nginx
COPY --from=builder /app/my-app/dist/my-app/ /usr/share/nginx/html

https://docs.docker.com/develop/develop-images/multistage-build/

edited Jul 08 '20 at 09:53

answered Jul 08 '20 at 09:44

Andrzej Sydor

1,373
4
13
28

1

What if I'm just trying to build a dev server? Should I still be using the Nginx image? – wO_o Jul 08 '20 at 15:57

Containerizing Angular project with Docker

1 Answers1