Frontend Ionic (fe-ionic)

Ionic quickstarter project

Purpose of this quickstarter

This quickstarter generates an Ionic 7.2.0 project, you can use it when you want to develop a cross platform mobile app (iOS, android and PWA) in one codebase using Web technologies like CSS, HTML and JavaScript/TypeScript.

It contains the basic setup for Docker, Jenkins, SonarQube and OpenShift, so you have your CI/CD process out of the box.

What files / architecture is generated?

The files are generated using Ionic CLI.

.
├── docker - This folder contains Docker configuration settings
│   ├── Dockerfile
│   └── nginx.vh.default.conf.nginx
├── e2e
│   ├── test.e2e-specs.ts
│   └── tsconfig.json
├── src
│   ├── app
│   │   ├── home
│   │   │   ├── home-routing.module.ts
│   │   │   ├── home.module.ts
│   │   │   ├── home.page.html
│   │   │   ├── home.page.scss
│   │   │   ├── home.page.spec.ts
│   │   │   └── home.page.ts
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── theme
│   │   └── variables.scss
│   ├── global.scss
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── test.ts
│   └── zone-flags.ts
├── angular.json - This file contains Angular project configuration settings
├── capacitor.config.xml - This file contains config settings for your mobile app, like package name and native preferences
├── ionic.config.json - This file contains Ionic project configuration
├── Jenkinsfile - This file contains Jenkins build configuration settings
├── .pre-commit-config.yaml
├── karma.conf.js
├── metadata.yml - Component metadata
├── package.json - This file contains scripts to run and node packages dependencies for project
├── README.md
├── release-manager.yml - Configuration file for the Release Manager
├── sonar-project.properties - This file contains SonarQube configuration settings
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Frameworks used

Usage - how do you start after you provisioned this quickstarter

As pre-requisite you’ll need to have installed:

node
npm which is bundled with the node installation
git
Ionic CLI globally in your local environment by running: npm install -g @ionic/cli

Once you have you developer environment set up you can simply:

Clone your generated git repository and cd to your folder
Run command npm install in project directory to install npm dependencies.
Run ionic serve command to start the dev server, it will open your browser at http://localhost:8100/

To develop an iOS application, you’ll need to setup your developer environment as suggested in this guide.

For android support configure your environment like this guide.

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: Ionic
component: frontend
instance: <the component id (this is the default, if omitted)>
description: "Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. Technologies: Ionic 7.2.0"
supplier: https://ionicframework.com
type: ods
version: 7.2.0

How this quickstarter is built thru Jenkins

The Jenkinsfile contains the configuration that customizes the core pipeline implemented by jenkins shared library.

When the code in your git repository is updated the Jenkinsfile comes into action with the following main stages for this quickstarter:

Build: Installs Ionic CLI and the dependencies of your project with npm install and generates the build by running ionic build. If the merged git branch is master, it creates the production build with ionic build --prod. Finally, it copies the output folder ./www into ./docker/dist.
Unit Test: Runs unit test cases by executing npm run test command. If any test fails, the build is marked as failed. This will also create test coverage analysis data which will then be transfered to SonarQube.
Lint: Profiler that ensures code best practices by running npm run lint command, if linting is not passing, the build is marked as failed also.
SonarQube Analysis: 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 application logic. Please revisit sonar-project.properties to configure analysis inclusions and exclusions according to your project’s needs.

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

Builder agent used

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

Known Limitation

Ionic Pro builds needs to be configured separately as described here