From a8fbc1d807407ca6abfc5dcc76361821e6c67333 Mon Sep 17 00:00:00 2001 From: Christian Schweikert Date: Wed, 27 Apr 2022 10:19:50 +0200 Subject: [PATCH] update fe-ionic to 6.19.0, remove workarounds, align code with fe-angular --- CHANGELOG.md | 1 + .../modules/quickstarters/pages/fe-ionic.adoc | 85 ++++++++++--------- fe-angular/init.sh | 8 +- fe-ionic/.browserslistrc | 20 ----- fe-ionic/Jenkinsfile | 6 +- fe-ionic/Jenkinsfile.template | 2 +- fe-ionic/files/README.md | 2 +- fe-ionic/files/docker/Dockerfile | 2 +- fe-ionic/files/metadata.yml | 4 +- fe-ionic/files/protractor.conf.js | 40 --------- fe-ionic/init.sh | 56 ++++++------ fe-ionic/ocp.env | 4 +- fe-ionic/sonar-project.properties.template | 2 +- 13 files changed, 89 insertions(+), 143 deletions(-) delete mode 100644 fe-ionic/.browserslistrc delete mode 100644 fe-ionic/files/protractor.conf.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 77968db92..51175cecb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,7 @@ - Switch fe-angular, fe-ionic and be-typescript-express to Node.js 16 builder agent ([#763](https://github.com/opendevstack/ods-quickstarters/issues/763) - Update and improve e2e-cypress quickstarter ([#770](https://github.com/opendevstack/ods-quickstarters/issues/770)) - inf-terraform-agent: consistent use of Python 3.9.x ([#793](https://github.com/opendevstack/ods-quickstarters/pull/793)) +- Update fe-ionic to Ionic 6.19.0 ([#780](https://github.com/opendevstack/ods-quickstarters/issues/780)) ## [4.0] - 2021-11-05 diff --git a/docs/modules/quickstarters/pages/fe-ionic.adoc b/docs/modules/quickstarters/pages/fe-ionic.adoc index db71c4ffb..5dd7967db 100644 --- a/docs/modules/quickstarters/pages/fe-ionic.adoc +++ b/docs/modules/quickstarters/pages/fe-ionic.adoc @@ -4,59 +4,63 @@ Ionic quickstarter project == Purpose of this quickstarter -This quickstarter generates an Ionic 6.13.1 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. +This quickstarter generates an *Ionic 6.19.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 https://www.docker.com/[Docker], https://jenkins.io/[Jenkins], https://www.sonarqube.org/[SonarQube] and https://www.openshift.com/[OpenShift], so you have your CI/CD process out of the box. == What files / architecture is generated? -The files are generated using https://ionicframework.com/docs/cli/[Ionic CLI]. It scaffolds a tabbed app containing 3 basic pages (home, about and contact). +The files are generated using https://ionicframework.com/docs/cli/[Ionic CLI]. ---- . -├── 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 +│ ├── protractor.conf.js │ └── 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 +│ │ ├── 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.html -│ │ ├── app.module.ts -│ │ ├── app.scss -│ │ └── main.ts +│ │ └── app.module.ts │ ├── assets │ ├── environments -│ │ ├── environment.dev.ts -| | |__ environment.e2e.ts +│ │ ├── environment.prod.ts │ │ └── environment.ts -│ ├── pages -│ ├── providers │ ├── theme +│ │ └── variables.scss +│ ├── global.scss │ ├── index.html -│ ├── manifest.json +│ ├── main.ts │ ├── 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 +│ └── 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 ├── karma.conf.js -├── protractor.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 -└── tslint.json +└── tsconfig.spec.json ---- == Frameworks used @@ -64,16 +68,16 @@ The files are generated using https://ionicframework.com/docs/cli/[Ionic CLI]. I * https://ionicframework.com/docs/cli/[Ionic CLI] * https://ionicframework.com/docs/[Ionic Framework] * https://angular.io/[Angular] -* http://www.typescriptlang.org/[Typescript] +* https://www.typescriptlang.org/[TypeScript] == Usage - how do you start after you provisioned this quickstarter As pre-requisite you'll need to have installed: * https://nodejs.org/en/download/[node] -* npm which is bundled with the node installation +* *npm* which is bundled with the node installation * https://git-scm.com/downloads[git] -* Ionic CLI globally in your local environment by running: `npm install -g @ionic/cli` +* *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: @@ -91,14 +95,13 @@ The following are typical xref:quickstarters:metadata.adoc[metadata] values that Note that the xref:jenkins-shared-library:labelling.adoc[OpenShift resources will be labeled] based on this metadata. ```yaml -name: -description: "My Ionic-based mobile app" -supplier: https://example.com -version: 1.0.1 +name: Ionic +component: frontend +instance: +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 6.19.x" +supplier: https://ionicframework.com type: ods -role: frontend -runtime: ionic -runtimeVersion: 6.13.1 +version: 6.19.x ``` == How this quickstarter is built thru Jenkins @@ -107,10 +110,10 @@ The `Jenkinsfile` contains the configuration that customizes the core pipeline i 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 running `npm run ionic:build`, if the merged git branch is master it creates the production build with `npm run ionic:build --prod`. Finally, it copies the output folder `www` into `docker/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` 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. +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. == Builder agent used diff --git a/fe-angular/init.sh b/fe-angular/init.sh index 89447fcca..9bf34aae9 100644 --- a/fe-angular/init.sh +++ b/fe-angular/init.sh @@ -26,7 +26,7 @@ echo "add additional task parameters to package.json" sed -i "s|\"test\": \"ng test\"|\"test\": \"ng test --watch=false --code-coverage --reporters=junit,coverage\"|" ./package.json echo "add required plugins to package.json" -sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^1.2.0\",\n \"typescript\"|" ./package.json +sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^2.0.1\",\n \"typescript\"|" ./package.json echo "configure headless chrome in karma.conf.js" read -r -d "" CHROME_CONFIG << EOM || true @@ -45,8 +45,7 @@ read -r -d "" CHROME_CONFIG << EOM || true },\\ }, EOM -sed -i "s|\s*browsers: \['Chrome'\],|$CHROME_CONFIG|" ./karma.conf.js -sed -i "s|\(browsers:\)| \1|g" ./karma.conf.js +sed -i "s|\s*browsers: \['Chrome'\],| $CHROME_CONFIG|" ./karma.conf.js echo "configure required plugins in karma.conf.js" sed -i "/plugins: \[/a\ \ require('karma-junit-reporter')," ./karma.conf.js @@ -57,7 +56,6 @@ read -r -d "" UNIT_XML_CONFIG << EOM || true outputDir: './build/test-results/test',\\ outputFile: 'test-results.xml',\\ useBrowserName: false,\\ - xmlVersion: 1\\ },\\ reporters: \['progress', 'kjhtml'\], EOM @@ -66,5 +64,5 @@ sed -i "s|\s*reporters: \['progress', 'kjhtml'\],| $UNIT_XML_CONFIG|" ./karma echo "configure coverage reporter in karma.conf.js" sed -i "s|{ type: 'text-summary' }|{ type: 'lcovonly' },\n { type: 'text-summary' }|" ./karma.conf.js -echo "copy custom files from quickstart to generated project" +echo "copy files from quickstart to generated project" cp -rv $SCRIPT_DIR/files/. . diff --git a/fe-ionic/.browserslistrc b/fe-ionic/.browserslistrc deleted file mode 100644 index 664d601b7..000000000 --- a/fe-ionic/.browserslistrc +++ /dev/null @@ -1,20 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# For the full list of supported browsers by the Angular framework, please see: -# https://angular.io/guide/browser-support - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. -not ios_saf 15.2-15.3 -not safari 15.2-15.3 diff --git a/fe-ionic/Jenkinsfile b/fe-ionic/Jenkinsfile index 8db9cd8b9..b7b7e6ec7 100644 --- a/fe-ionic/Jenkinsfile +++ b/fe-ionic/Jenkinsfile @@ -14,16 +14,16 @@ node { library("ods-jenkins-shared-library@${sharedLibraryRef}") -def ionicVersion = "6.13.1" -def eslintVersion = "7.24.0" +def ionicVersion = "6.19.0" odsQuickstarterPipeline( imageStreamTag: "${odsNamespace}/jenkins-agent-nodejs16:${agentImageTag}", + resourceRequestMemory: '1Gi', + resourceLimitMemory: '2Gi', ) { context -> stage("update ionic cli") { sh "npm install -g @ionic/cli@${ionicVersion} && ionic version" - sh "npm install -g eslint@${eslintVersion} && eslint -v" } stage("init ionic project") { diff --git a/fe-ionic/Jenkinsfile.template b/fe-ionic/Jenkinsfile.template index bc4e9e19d..cef7414fa 100644 --- a/fe-ionic/Jenkinsfile.template +++ b/fe-ionic/Jenkinsfile.template @@ -22,7 +22,7 @@ odsComponentPipeline( def stageBuild(def context) { stage('Build') { withEnv(["TAGVERSION=${context.tagversion}", "NEXUS_HOST=${context.nexusHost}"]) { - sh 'npm i -g @ionic/cli@6.13.1' + sh 'npm i -g @ionic/cli@6.19.0' sh 'npm install' if ('master'.equals(context.gitBranch)) { sh 'ionic build --prod' diff --git a/fe-ionic/files/README.md b/fe-ionic/files/README.md index 77bbcd727..61916bbb5 100644 --- a/fe-ionic/files/README.md +++ b/fe-ionic/files/README.md @@ -1,5 +1,5 @@ # Ionic Quickstarter -Quickstarter created with Ionic CLI 6.13.1 +Quickstarter created with Ionic CLI 6.19.0 ## Running unit tests All files with the ending `.spec.ts` in the src folder will be tested with karma diff --git a/fe-ionic/files/docker/Dockerfile b/fe-ionic/files/docker/Dockerfile index 7b93e09bc..0968a45c0 100644 --- a/fe-ionic/files/docker/Dockerfile +++ b/fe-ionic/files/docker/Dockerfile @@ -1,4 +1,4 @@ -FROM nginx:1.20.1-alpine +FROM nginx:1.21.6-alpine RUN chmod -R 777 /var/log/nginx /var/cache/nginx /var/run \ && chgrp -R 0 /etc/nginx \ diff --git a/fe-ionic/files/metadata.yml b/fe-ionic/files/metadata.yml index 7a18f325d..af22f0735 100644 --- a/fe-ionic/files/metadata.yml +++ b/fe-ionic/files/metadata.yml @@ -1,6 +1,6 @@ --- name: Ionic -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 6.13.1" +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 6.19.x" supplier: https://ionicframework.com -version: 4.x type: ods +version: 6.19.x diff --git a/fe-ionic/files/protractor.conf.js b/fe-ionic/files/protractor.conf.js deleted file mode 100644 index 964fd0b22..000000000 --- a/fe-ionic/files/protractor.conf.js +++ /dev/null @@ -1,40 +0,0 @@ -var SpecReporter = require('jasmine-spec-reporter').SpecReporter; - -exports.config = { - allScriptsTimeout: 11000, - directConnect: true, - capabilities: { - 'browserName': 'chrome', - 'chromeOptions': { - 'args': [ - 'headless', - 'no-sandbox', - 'disable-web-security', - '--disable-gpu', - '--window-size=1024,768' - ] - } - }, - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function () { - } - }, - specs: ['./e2e/**/*.e2e-spec.ts'], - baseUrl: 'http://localhost:8100', - useAllAngular2AppRoots: true, - beforeLaunch: function () { - - require('ts-node').register({ - project: 'e2e' - }); - - require('connect')().use(require('serve-static')('www')).listen(8100); - - }, - onPrepare: function () { - jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); - } -}; diff --git a/fe-ionic/init.sh b/fe-ionic/init.sh index 36edf7484..f2608f276 100755 --- a/fe-ionic/init.sh +++ b/fe-ionic/init.sh @@ -32,13 +32,13 @@ cd ../$COMPONENT # remove empty temp-dir rm -r ../start_$COMPONENT -echo "Copy browsers list " -cp ../fe-ionic/.browserslistrc .browserslistrc +echo "add additional task parameters to package.json" +sed -i "s|\"test\": \"ng test\"|\"test\": \"ng test --watch=false --code-coverage --reporters=junit,coverage\"|" ./package.json -echo "Change test setup to single run in karma.conf.js" -sed -i "s|\s*singleRun: false|singleRun: true|" ./karma.conf.js +echo "add required plugins to package.json" +sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^2.0.1\",\n \"typescript\"|" ./package.json -echo "Configure headless chrome in karma.conf.js" +echo "configure headless chrome in karma.conf.js" read -r -d "" CHROME_CONFIG << EOM || true browsers: \['ChromeNoSandboxHeadless'\],\\ customLaunchers: {\\ @@ -55,35 +55,39 @@ read -r -d "" CHROME_CONFIG << EOM || true },\\ }, EOM -sed -i "s|\s*browsers: \['Chrome'\],|$CHROME_CONFIG|" ./karma.conf.js -sed -i "s|\(browsers:\)| \1|g" ./karma.conf.js +sed -i "s|\s*browsers: \['Chrome'\],| $CHROME_CONFIG|" ./karma.conf.js -echo "Add required plugins in karma.conf.js" +echo "configure required plugins in karma.conf.js" sed -i "/plugins: \[/a\ \ require('karma-junit-reporter')," ./karma.conf.js -echo "Configure junit xml reporter in karma.conf.js" +echo "configure junit xml reporter in karma.conf.js" read -r -d "" UNIT_XML_CONFIG << EOM || true - reporters: \['progress', 'junit', 'kjhtml'\],\\ -\\ junitReporter: {\\ outputDir: './build/test-results/test',\\ outputFile: 'test-results.xml',\\ - useBrowserName: false\\ - }, + useBrowserName: false,\\ + },\\ + reporters: \['progress', 'kjhtml'\], EOM -sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|$UNIT_XML_CONFIG|" ./karma.conf.js - -echo "Fix path for coverage analysis output" -sed -i "s|\s*__dirname, '\.\./coverage'|__dirname, 'coverage'|" ./karma.conf.js - -echo "Adjust package.json to have the full test" -sed -i "s|\s*\"test\": \"ng test\"|\"test\": \"ng test --code-coverage --reporters=junit --progress=false\"|" ./package.json -sed -i "s|\s*\"devDependencies\": {|\"devDependencies\": { \"karma-junit-reporter\": \"^2.0.1\",|" ./package.json - -echo "fix nexus repo path" -repo_path=$(echo "$GROUP" | tr . /) -sed -i.bak "s|org/opendevstack/projectId|$repo_path|g" $SCRIPT_DIR/files/docker/Dockerfile -rm $SCRIPT_DIR/files/docker/Dockerfile.bak +sed -i "s|\s*reporters: \['progress', 'kjhtml'\],| $UNIT_XML_CONFIG|" ./karma.conf.js + +echo "configure coverage reporter in karma.conf.js" +sed -i "s|{ type: 'text-summary' }|{ type: 'lcovonly' },\n { type: 'text-summary' }|" ./karma.conf.js + +echo "configure headless chrome in protractor.conf.js" +read -r -d "" PROTRACTOR_CHROME_CONFIG << EOM || true + browserName: 'chrome',\\ + chromeOptions: {\\ + args: \[\\ + 'headless',\\ + 'no-sandbox',\\ + 'disable-web-security',\\ + '--disable-gpu',\\ + '--window-size=1024,768'\\ + \]\\ + } +EOM +sed -i "s|\s*browserName: 'chrome'| $PROTRACTOR_CHROME_CONFIG|" ./e2e/protractor.conf.js echo "copy files from quickstart to generated project" cp -rv $SCRIPT_DIR/files/. . diff --git a/fe-ionic/ocp.env b/fe-ionic/ocp.env index 04f536d90..082fae826 100644 --- a/fe-ionic/ocp.env +++ b/fe-ionic/ocp.env @@ -1,4 +1,4 @@ -MEMORY_LIMIT=256Mi -MEMORY_REQUEST=128Mi +MEMORY_LIMIT=2Gi +MEMORY_REQUEST=1Gi CPU_REQUEST=50m CPU_LIMIT=100m diff --git a/fe-ionic/sonar-project.properties.template b/fe-ionic/sonar-project.properties.template index e28ad698f..4cd8f1450 100644 --- a/fe-ionic/sonar-project.properties.template +++ b/fe-ionic/sonar-project.properties.template @@ -17,5 +17,5 @@ sonar.coverage.exclusions=**/*.spec.ts,**/*.module.ts,src/environments/** sonar.exclusions=**/*.html,**/*.scss,**/*.json,**/*.ico,**/*.svg # Define coverage information inside the Angular project -sonar.javascript.lcov.reportPaths=coverage/lcov.info +sonar.javascript.lcov.reportPaths=coverage/ngv/lcov.info