In this tutorial we're going to walk through using Azure Devops as a CI pipeline to build our Ionic hybrid mobile application. To start we are going to create a new blank app using the Ionic CLI. I'm calling this project Boardgame Comparsion. To start I installed the latest ionic cli
npm install -g @ionic/cli
After install the latest cli we create a new app by calling ionic start appName.
ionic start boardGameComparsion
I selected the blank app, Angular routing and did not select Capacitor. After the cli completes we'll have a default Ionic/Angular app. Next is setting up the Azure side. I'm going to use Azure Devops as my git repository, agile board, and CI/CD pipeline. I already have an organization setup in Azure, but if you don't you can sign up for the free trial. Once you have your Ionic app created and DevOps organization setup you can push your local code to the repo that in Azure. The Ionic CLI should have initialized a git repo, but if it didn't just open a terminal/cmd, navigate to the root for your project and enter "git init". Once git is initialized you can add the remote origin as shown in your repo then push your local code to Azure using "git push -u origin master". Now that your local git is configured we'll setup the build pipeline.
To setup a pipeline click on Pipelines under Repos on the left side navigation pane. Since this is a new project we don't have any existing pipelines, click the Create Pipeline button to get started.
Next we need to tell Azure where our code is hosted. For this project we have everything in Azure so we'll pick the Azure Repos Git option.
After we tell Azure where the code is we need to tell it what kind of project to build. This first pipeline will be the CI that handles compiling the JS source and running our unit tests. I've chosen Node.js with Angular.
Next comes configuring the YAML to fit our needs. I've made several changes to the default YAML template.
Now I'm ready to save this pipeline and kick off my first build. When you click the "Save & Run" button it will commit the YAML to your source and trigger a build on the master branch (you can see the trigger in my YAML on line 2).
If we try the build now, with the default ionic app, the unit test step will fail. Digging into the logs for that step we see that it failed because it couldn't open a chrome window to display the test results. To fix this I edited the karma.conf file and switch to headless chrome. I also changed singleRun to true since I only want this to run once and not wait for changes. Later we'll want to make some changes so that locally we can run in normal Chrome for debugging and using autowatch for TDD, but this will work for now.
After pushing the change to azure a new CI build should start. With our changes to karma.conf the unit test step succeeds and the build completes like we'd expect.
Next we'll push up a failing unit test to show two things 1) that our CI build fails like it should and 2) that we can relate git commits to work items. Next, I pushed up a failing unit test and created a bug to track fixing it. Under the Boards menu item I selected Work Items then New Work Item of type bug. I called it "Unit Tests are Failing".
Once the CI pipeline ran after I pushed up the broken unit test to confirm that a failing test will break the build.
You can see that the build log includes the same error from jasmine that you'd get locally. Now to fix it I'm going to delete the test and associate the change with the bug we created earlier. If you include the issue number at the end of your commit message that commit will be associated to that work item. Additionally if you want to close an issue you can add the word fixes (eg fixes #35) to your message.
You can see that I have two changes associated with this issue and that the state has been changed to resolved. With the failing test removed the job will continue to the archive and publish steps. When they complete we'll have a zip file containing all of the JS with node_modules folder that we can use in future jobs.
Happy Coding
Sean Wernimont The Blind Squirrel Copyright 2015-2020
|
AuthorWelcome to The Blind Squirrel (because even a blind squirrel occasionally finds a nut). I'm a full-stack web and mobile developer that writes about tips and tricks that I've learned in Swift, C#, Azure, F# and more. Archives
April 2018
Categories
All
|