Setting up CI/CD Pipeline for a React app using Travis CI
Published: 2023-02-17 04:24:45

---
title: Setting up CI/CD Pipeline for a React app using Travis CI
published: true
date: 2023-01-22 10:24:01 UTC
tags: 
canonical_url: https://codingchronicles.adityakarad.com/ci-cd-for-react-project-using-travis-ci
---

# Introduction

In this tutorial, we will set up a CI/CD pipeline for a simple React application with the help of Travis-CI. Travis-CI works best with Github, so we will use GitHub in this tutorial.

# Pre-requisites

- Create a GitHub account.

- Create a Travis-CI account and link it to your GitHub account.

- Youll need to have [Node >= 14.0.0 and npm >= 5.6](https://nodejs.org/en/) on your machine.

# Initialize a React app

Lets create a simple react app. We will use create-react-app, which provides a nice environment for building a single-page application in React.

```
npx create-react-app travis-ci-react

```

We can start our application through `npm start` command in the terminal.

## Adding `.travis.yml` file

Add a `.travis.yml` file to the react project at the root level.

### What does `.travis.yml` file do?

`.travis.yml` will help us configure our applications CI-CD pipeline.

Travis only runs builds on the commits you push after youve added a `.travis.yml` file.

![Project structure of our React application with a .travis.yml file.](https://cdn.hashnode.com/res/hashnode/image/upload/v1674381852918/16fccb5d-3179-4ee7-be3d-80fdbf0a01fb.png)

Now lets set some properties in `travis.yml` file.

Parameters to provide:

1. `language`: Provide the programming language for your project. For our case, its `node_js`.

2. `version`: Provide the version of the programming language for your application. I have observed that if you dont provide a version, it automatically picks up v2. This can cause your build to fail since many dependencies require a minimum Node version of 8.

3. `cache: npm` This will cache your NPM dependencies for the next run. Note that `npm install` will still run on every build and will update/install any new packages added to your `package.json` file

After this step `.travis.yml` file becomes:

```
language: node_js
node_js:
  - 16
cache: npm

```

## Hooks provided by Travis CI

Travis provides us with hooks that are run at specific points in time during the build. These hooks are (in chronological order):

- `before_install`

- `install`

- `before_script`

- `script`

- `after_success`

- `after_failure`

- `after_script`

- `before_deploy`

- `deploy`

- `after_deploy`

This provides a lot of flexibility for custom requirements! Lets say you want to notify your developer about a failed Travis build. You can utilize the `after_failure` hook to do so.

## `script` and `install` hooks

Since we know we want to install NPM dependencies for our React project before we test or build it, we should add `npm install` as an install script.

Since we also want to test our changes, we should add a `npm test` as a script.

After testing we can build our react app through `npm run build` script.

Adding these three changes, our `travis.yml` file becomes:

```
language: node_js
node_js:
  - 16
cache: npm
install:
    - npm install
script:
  - npm test
  - npm run build

```

## Using GitHub Pages in `deploy` hook

Lets leverage the `deploy` hook to deploy our react app to GitHub Pages.

But before that, make sure you have set up and enabled Github pages: [Follow this guide!](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)

You also need to [create a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) from GitHub with the `repo` scope. We will require this token for authorizing Github Pages deployments from Travis. Copy this token and add it as an [environment variable in Travis CI](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings) named `GITHUB_TOKEN`.

![Scopes for a personal token in Github settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382005215/58681a72-e659-426d-9090-42b1304474a4.png)

![Adding environment variable in Travis-CI dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382011892/8eb1da82-9669-48b9-a49d-8ce449d9a177.png)

Now our resulting `.travis.yml` file is:

```
language: node_js
node_js:
  - 16
cache: npm
install:
    - npm install
script:
  - npm test
  - npm run build

deploy:
 provider: pages
 skip_cleanup: true
 github_token: $GITHUB_TOKEN
 local_dir: build
 on:
   branch: master

```

### Setting homepage in `package.json` file

You also need to make a small tweak in `package.json` file before pushing your code. Make sure you override `homepage` property in `package.json` file and set it to the URL where your project is going to be hosted.

If youre deploying to GitHub Pages, then the URL will be `https://<YOUR_GITHUB_USERNAME.github.io/<REPO_NAME>`

If youre curious as to why we do this, check [this](https://stackoverflow.com/a/70749100) out.

![Changes in package.json file](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382050615/ed48713a-d377-4fb4-86ff-ca59f2a3e595.png)

## Committing changes to Github and triggering a Travis CI build

Lets commit these changes and push them to a GitHub repository.

![Github repository after pushing code](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382120061/483ada0b-dd02-4fab-8686-29c9080606cd.png)

### Travis CI Build Results

If your TravisCI account is linked to your GitHub account, a build automatically gets triggered when you push a `.travis.yml` file. You can view this in Actions tab.

![Actions tab of the same repository](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382147193/44818c45-1e5e-450d-be76-2603255ed48b.png)

You can also view the results of any single build by clicking it:

![Selecting any build to view its result](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382224281/9959c67d-5104-4266-bb09-e9553a7df5ae.png)

Similarly, you can also head to your TravisCI dashboard and see the build results.

![Travis-CI dashboard build result (successful)](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382246297/fd8a9028-9253-4cde-afc6-9a68be5b0a96.png)

# Conclusion

If your build is successful, you can head over to your GitHub Pages URL and see the project deployed!

For example: here is mine: [https://itskarad.github.io/travis-ci-react/](https://itskarad.github.io/travis-ci-react/)

# Source code of the project

[🔗 Source code on GitHub](https://github.com/itsKarad/travis-ci-react)

[🔗 Github Page](https://itskarad.github.io/travis-ci-react/)

# Some more things

## Default commands used by Travis CI

Travis already provides some default scripts:

1. Travis has a default install script for Nodejs projects as `npm install`

2. Travis has a default build script for Nodejs projects as: `npm test`

Hence we need not add the `install: npm install` since its automatically run by Travis for NodeJS projects.

Similarly, we need not add the `script: npm test` as well.

```
language: node_js
node_js:
  - 16
cache: npm
script:
  - npm run build

```