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
├── .pre-commit-config.yaml
├── README.md
├── 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
├── 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
├── sonar-project.properties - 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.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.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.

Metadata

The following are typical metadata values that can be used for components based on this quickstarter: Note that the OpenShift resources will be labeled based on this metadata.

name: <the component id (this is the default, if omitted)>
description: "My Angular-based front end"
supplier: https://example.com
version: 1.0.1
type: ods
role: frontend
runtime: angular-cli
runtimeVersion: 19.1.4

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

  • 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 sonar-project.properties 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.

Please note: The support for TSLint has been removed from this quickstarter. Also Angular is not shipping a linter by default anymore. Please consider adding ESLint support or a formatter like Prettier. For adding ESLint simply type ng add @angular-eslint/schematics. For setting up Prettier please see https://prettier.io/docs/en/install.html.

include::partials$secret-scanning-with-gitleaks.adoc

Builder agent used

This quickstarter uses Node.js 22 builder agent for Jenkins.

Known limitations

NA