Frontend Ionic (fe-ionic)
Ionic quickstarter project
Purpose of this quickstarter
This quickstarter generates an Ionic 3 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.
What files / architecture is generated?
The files are generated using Ionic CLI. It scaffolds a tabbed app containing 3 basic pages (home, about and contact).
. ├── Jenkinsfile - This file contains Jenkins build configuration settings ├── README.md ├── config - This folder contains Webpack and sass configuration settings ├── docker - This folder contains Docker configuration settings │ ├── Dockerfile │ └── nginx.vh.default.conf.nginx ├── e2e │ ├── test.e2e-specs.ts │ └── tsconfig.json ├── resources - This folder contains resources by platform ios, android ├── 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.ts │ │ ├── app.html │ │ ├── app.module.ts │ │ ├── app.scss │ │ └── main.ts │ ├── assets │ ├── environments │ │ ├── environment.dev.ts | | |__ environment.e2e.ts │ │ └── environment.ts │ ├── pages │ ├── providers │ ├── theme │ ├── index.html │ ├── manifest.json │ ├── polyfills.ts │ ├── service-worker.js │ ├── test.ts │ └── tsconfig.spec.json ├── www ├── .angular-cli.json - This file contains Angular project configuration settings ├── 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 ├── karma.conf.js ├── protractor.conf.js ├── tsconfig.json └── tslint.json
Usage - how do you start after you provisioned this quickstarter
As pre-requisite you’ll need to have installed:
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 athttp://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.
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 the dependencies of your project with
yarn install
, generates the build by runningnpm run ionic:build
, if the merged git branch is master it creates the production build withnpm run ionic:build --prod
. Finally, it copies the output folderwww
intodocker/dist
. -
Unit Test - Runs unit test cases by executing
yarn 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
andsrc/environments/**
are excluded from the analysis, since they usually don’t contain logic. Please revisitsonar-project.properties
to configure analysis inclusions and exclusions according to your project’s needs.
Builder agent used
This quickstarter uses Nodejs10-Angular builder agent Jenkins builder agent.
Known Limitation
Ionic Pro builds needs to be configured separately as described here