Bitrise supports Ionic apps too! Read a step by step tutorial from adding the project to Bitrise to setting up webhooks and triggers.

Guest blog post by Sébastien Pousse, the original appeared on Developers @ Yellow Pages in French.

Sébastien works for PagesJaunes (French Yellow Pages) as head of innovation and mobile strategy and he likes sports, especially climbing, squash, mountain biking and running.

Hello, everyone :)

I've heard about Ionic quite a few times lately, both at @PagesJaunes and in my exchanges with other companies. I have never developed anything using this technology that's why I will not go into details about the development of an Ionic project, but rather show you how to set up your project on a big scale with Bitrise.

The stopwatch is on so I do not linger here. These are the essential elements for it to work well:

• A project in a repository accessible from the net via Github, Bitbucket, Gitlab etc.
• A Bitrise account

Adding the project to Bitrise

Go to the Bitrise interface and on the main dashboard click on + Add new app. You'll then see the main configuration screen.

Choose the repository in which your Ionic project is located.

My project is here, feel free to fork it.

Then you have the opportunity to request a public SSH key if you have to access other repositories in your project. Which is not my case now.

The project then goes on to the scanner:

--+---------------------------------------------------------------+----------+
| ✓ | Running project scanner                                       | 11 sec   |
+---+---------------------------------------------------------------+----------+


+------------------------------------------------------------------------------+
|                               bitrise summary                                |
+---+---------------------------------------------------------------+----------+
|   | title                                                         | time (s) |
+---+---------------------------------------------------------------+----------+
| ✓ | Activate App SSH key                                          | 3.18 sec |
+---+---------------------------------------------------------------+----------+
| ✓ | Git Clone Repository                                          | 8.22 sec |
+---+---------------------------------------------------------------+----------+
| Update available: 3.4.3 -> 4.0.8                                             |
+---+---------------------------------------------------------------+----------+
| ✓ | Running project scanner                                       | 11 sec   |
+---+---------------------------------------------------------------+----------+
| Total runtime: 22 sec                                                        |
+------------------------------------------------------------------------------+

‍

Bitrise has detected that it was an Ionic project, so far so good.

Choose a stack

Theoretically, we can choose a stack dedicated to only iOS or only Android. But with this kind of technology, I tend to believe that what we want is to generate both types of application. So I chose ios,android as the platform and a hybrid stack.

Set up a webhook

A CI workflow worthy of this title must be wired to the repository and must react to the activities of the developer. For this, we will set up a webhook that will react to each push code on master.

The webhook will automatically be connected to Github. I'll come back to it later and explain what's going on.

The project is now finished and wired. Go back to the top of the page and click on Finish in the top right corner or kick off your first test build by clicking the green button at the bottom of the page.

The first build

After the initialization of the project, a Primary workflow is created and launched automatically. This basic workflow is specific to the type of your project. It will differ according to whether one has an iOS, Android, Ionic or React Native application. The tools to produce a build are different for each.

The Ionic workflow

Activate SSH key (RSA private key)

Git Clone Repository: Clones the GIT project from Github for us

Certificate and profile installer: Downloads and installs certificates and provisioning profiles

Run npm command: Step to run an npm command. By default, it will launch install, which will install the dependencies of the project.

Generate cordova build configuration: Generates a "build.json" with signature settings

Ionic archive: Will prepare the builds for the requested platforms.

Deploy to Bitrise.io - Apps, Logs, Artifacts: This step is really nice, it will recover the artifacts (builds and logs) to a page on Bitrise without deploying to an internal store or an official store.

Webhooks

Go to the {} Code tab of your project. Let's see how to configure the webhook between Bitrise and Github.

Two pieces of information are important here: the APP SLUG and the API TOKEN, which are built in the URL which allows making our link between the repository and Bitrise.

On GitHub's side, just enter the URL to Payload URL, under the repo's Webhooks page:

And choose the type of events you want to be triggers. It is possible to make our workflow react to almost all the events happening to our repository. By default, we will activate the webhook on code push and pull requests.

I can already hear you asking... But how does one specify which workflow to be launched for this or that event? And now we'll return to the interface of Bitrise, the dashboard. Click on the Workflow of your app.

And then choose Triggers. This is where you will make Github events trigger your specified Bitrise workflow.

Conclusion

I hope I made all a bit clearer, but the automatic import process of the projects works very well and makes all the necessary connections to work in CI mode very quickly anyway.

After all, going into more details would take longer. ;)

English version by Anna Bátki.