Create a docker container from an angular project

General
1

I want to create a docker container based on my angular project.
This is my dockerfile:

# here we dockerize angular app
FROM node:12-alpine3.11

WORKDIR /usr/local/lib


COPY .  /usr/local/lib/

RUN npm install

RUN npm run build

EXPOSE 4200
CMD [ "node", "server.js" ]

The dockerfile is located in the directory of my angular project containing all of the files except for node_modules.
When i try to build my docker image i reach the build stage and get this error:
“./node_modules/primeng/fesm2015/primeng-chart.js:4:0-34 - Error: Module not found: Error: Can’t resolve ‘chart.js/auto’ in ‘/usr/local/lib/node_modules/primeng/fesm2015’”

this is my package.json

{
 "name": "acm_jenkins_web",
 "version": "0.0.0",
 "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"sonar-scanner": "sonar-scanner"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.2",
"@angular/cdk": "^12.2.2",
"@angular/common": "~12.0.3",
"@angular/compiler": "~12.0.3",
"@angular/core": "~12.0.3",
"@angular/forms": "~12.0.3",
"@angular/platform-browser": "~12.0.3",
"@angular/platform-browser-dynamic": "~12.0.3",
"@angular/router": "~12.0.3",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"bootstrap": "^3.0.0",
"chart.js": "^2.9.4",
"jquery": "^3.6.0",
"ngx-toastr": "^14.0.0",
"popper.js": "^1.16.1",
"primeicons": "^4.1.0",
"primeng": "^12.0.0-rc.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
 },
 "devDependencies": {
"@angular-devkit/build-angular": "~12.0.3",
"@angular/cli": "~12.0.3",
"@angular/compiler-cli": "~12.0.3",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"typescript": "~4.2.3",
"sonar-scanner": "^3.1.0"
 }
 }
2

Here’s a copy of a Dockerfile from one of my projects. It builds an Angular project and then exposes the distribution files using nginx

FROM node:12.13.0-alpine AS builder
COPY . ./visulate-client
WORKDIR /visulate-client
RUN npm i
RUN $(npm bin)/ng build --prod

FROM nginx:1.16.1-alpine
COPY --from=builder /visulate-client/dist/client/assets/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /visulate-client/dist/client/ /usr/share/nginx/html
1 Like
3

Nginx is also how I’d serve a client-only application. However, despite the topic’s title, the question actually may (also) provide some server side component, server.js? If that serves more than just the client-side files, then that will need some node to run. (Which could still be proxied through Nginx, of course.)

Aside: during development, you can improve build speed by first only copying package.json and package-lock.json, and RUN npm i. Only after that step, copy the source code and build that. This way, cache for installing the dependencies is only invalidated when package.json or package-lock.json change, not whenever a minor edit is made to some source file.

Does this work locally for you?

I’d remove node_modules locally and ensure the commands you RUN in the Dockerfile, also work locally, ensuring your package.json is complete.