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
├── 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
├── 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
├── 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
├── tslint.json

7 directories, 31 files

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 Jenkinsfile is provisioned with this quick starter to ease CI/CD process. In Jenkinsfile, there are various stages

stageBuild - Builds the application by running yarn install, yarn build command and copies output folder dist into docker/dist folder.
stageUnitTest - Runs unit test cases by executing command yarn test.
stageLint - Runs ng lint profiler by running command yarn lint.

Builder Slave used

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