Frontend Angular (fe-angular)

Angular quickstarter project

Purpose of this quickstarter

User this is a Angular project quickstarter if you want to build a frontend. It contains the basic setup for Docker, Jenkins, SonarQube and OpenShift.

What files / architecture is generated?

├── Jenkinsfile - This file contains Jenkins build configuration settings
├── angular.json - This file contains Angular project configuration settings
├── browserslist - This file is used by the build system to adjust CSS and JS output to support the specified browsers
├── docker - This folder contains Docker configuration settings
│   ├── Dockerfile
│   └── nginx.vh.default.conf.nginx
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package-lock.json - It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
├── package.json - This file contains scripts to run and node packages dependencies for project
├── metadata.yml - Component metadata
├── release-manager.yml - Configuration file for the Release Manager
├── - This file contains SonarQube configuration settings
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├──
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json

Frameworks used

This project is generated by Angular CLI

Usage - how do you start after you provisioned this quickstarter

  • Run command npm install in project directory to install npm packages.

  • Run ng serve --open command for dev server.

How this quickstarter is built through Jenkins

The build pipeline is defined in the Jenkinsfile in the project root. The main stages of the pipeline are:

  • stageBuild - Builds the application by running npm install, npm run build command and copies output folder dist into docker/dist folder.

  • stageUnitTest - Runs unit test cases by executing command npm run test. This will also create test coverage analysis data which will then be transfered to SonarQube during odsComponentStageScanWithSonar

  • stageLint - Runs ng lint profiler by running command npm run lint.

  • odsComponentStageScanWithSonar - Triggers a code quality analysis by transfering code and test coverage analysis data to SonarQube. By default files like .spec.ts, .modules.ts and src/environments/** are excluded from the analysis, since they usually don’t contain logic. Please revisit to configure analysis inclusions and exclusions according to your project’s needs.

Please note: By default the applciation is always build as full production build including all sorts of optimizations. In addition source maps will be added except for builds that are triggered from master. This can be changed by configuring (additional) build configurations within angular.json and by using them via stageBuild or package.json.

Builder agent used

This quickstarter uses Nodejs10-Angular builder agent Jenkins builder agent.

Known limitations