Ionic project: Continuous Integration with Travis for gh-pages

In this article, I’m going to share my experience with setting up Continuous Integration with Travis for an Ionic 2/3 project.

Before starting, I’m assuming you’re familiar with Ionic & Ionic CLI (just the basic commands to start a project).

Let’s start by creating a simple ionic ionic project from the blank template.

$ ionic start ionic-travis-gh-pages blank

Now let’s put the project in github. Create a new project , I chose ionic-travis-gh-pages. Then, let’s push our repository from the command line (Just the follow the instructions in Github).

In my case, this what I’ve done:

$ cd ionic-travis-gh-pages
$ git remote add origin https://github.com/hamzahamidi/ionic-travis-gh-pages.git
$ git push -u origin master

Before we move on to Travis-CI, we need to do generate a token for Travis to give it the access to our public repository. So, go to Personal access tokens (just follow the link).

Click on generate a new token: give a description to the token, you can choose whatever you want, I chose travis-token. Then click on public_repo in repo.

Just make sure to copy your new personal access token because you won’t be able to see it again!

Just store the token somewhere else we’ll need it once we set up the project in Travis.


Let’s move on to create a travis account. Follow this link.

You need to go now to your profile & click on the button sync account (check the image below) so that you synchronise your github account with Travis.

Down below, you have a list of your public github repository. Search for the ionic project with just created.

Click on the ionic project & go its settings. Now, in the section Environment Variables, add a new variable call it GITHUB_TOKEN & in the value give it the token we generated before in github Personal access tokens (check the image below).


In the root of your project create file .travis.yml & copy the following content:

language: node_js
node_js:
— “8.9.4”
branches:
only:
— master
before_script:
— npm install -g ionic cordova
script:
— ionic cordova build browser — prod
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN
keep-history: true
on:
branch: master
local_dir: www

I’ll quickly summarize these configurations.

branches:only: means the branches where you want to run the builds. Here I only chose the master branch.

before_script: These are commands that run before the build step. Here I just install ionic and cordova.

script: The build step where we run a production build for our application. Here we generate the build of the ionic project.

For more information the doc is the best place.

Now we commit the changes & push them the repository:

$ git add .travis.yml
$ git commit -m "Add Travis-CI"
$ git push origin master

Now, go to your Travis profile, Click on the Sync account button & activate the builds in the ionic project (just turn the switch on). The build we’ll trigger automatically, if not just trigger it manually with button inside more options.


If the build passes, go to your github repository settings. Under GitHub Pages choose the branch where you want to deploy from & choose gh-pages (check the image below).

Here’s the link of my github project.

links:

👉 Don’t forget to clap if you like the post