Deploy Ionic application in GitHub using Travis-CI
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 blankNow 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 masterBefore 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 synchronize your GitHub account with Travis.
Down below, you have a list of your public GitHub repositories. Search for the ionic project we just created.
Click on the ionic project & go to 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:
— masterbefore_script:
— npm install -g ionic
— npm ci script:
— ionic build --prod -- --base-href ./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 the commands that run before the build step. Here I just install ionic& the dependencies of the project.
script: The build step where we generate a production build of the application. Here we generate the build for the web application.
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 "ci: Add Travis-CI"
$ git push origin masterNow, 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.
