Angular Build Environment using Docker
4.7K
Used for running Angular Builds and Testing using Docker in CI/CD environments.
| System | Version |
|---|---|
| Node | 10 |
| NPM | 6 |
| Browser | Chrome |
| Runner | Puppeteer |
This will compile a production build of your Angular project and copy the artifact into an Nginx-based Docker Image.
Create a Dockerfile in your project that references this image: dealersolutions/docker-angular-build
### STAGE 1: Build ###
# We label our stage as ‘builder’
FROM dealersolutions/docker-angular-build as builder
COPY ./assets-source/package*.json ./
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app
WORKDIR /ng-app
COPY ./assets-source .
## Run Unit Tests (Optional - Uncomment to use)
#RUN npm run ng test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
## Build the angular app in production mode and store the artifacts in dist folder
RUN npm run ng build -- --prod --output-path=dist
### STAGE 2: Setup ###
FROM nginx:1.14.1-alpine
## Copy nginx configuration (Optional - Uncomment and add nginx.conf to use)
#COPY ./docker/nginx.conf /etc/nginx/nginx.conf
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Chrome is already present in this image, however Angular needs Karma setup to use it.
Add the following to your karma.conf.js file in your Angular project to enable Chrome running in test mode. Remember to uncomment the Unit testing section in the Dockerfile example above.
...
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
},
},
...
Content type
Image
Digest
Size
213.2 MB
Last updated
almost 7 years ago
docker pull dealersolutions/docker-angular-build