Setting up continuous Integration

Repository for this part is available on git branch master

AndreVarandas / mood-sentences

✨ Mood sentences

Preparation

In this part of our tutorial series, we will add CI (Continuous Integration) with https://travis-ci.org/. It's free for public repositories.

If you've also made yours private, now is the time to make your Github project public before going any further. Simply click on settings -> Scroll down to Danger Zone and click on change visibility to public.

npm account setup

It's also a good time to make sure our npm account is properly configured/created. Go to https://www.npmjs.com/ and create or login to your account.

Click on your profile avatar (top right) and choose "Add organization". I'm using my own name for mine (@varandas), but you can choose whatever you'd like.

Pushing packages to an organization, makes them "scoped". In my case, my package full name will be "@varandas/mood-sentences". This makes npm cleaner and avoids clashing with already existing package names.

We will also need to update our package.json file. In the first line, we have a "name" property, that I've updated to:

"name": "@varandas/mood-sentences",

Travis configuration

Head to https://travis-ci.org/account/repositories login or create an account with your github profile and click on sync account button, right under your profile picture on the top left, for travis to fetch your repositories. Once that is done, under Legacy Services Integration enter the name of your repository. Once it shows in the list, click on the toggle to enable travis for our repository.

Now travis has permissions to access our repository.

We need to add a special file at the root of our project named .travis.yml. Later, when we push our code, travis CI will look for this configuration file - executing our instructions.

sudo: false
language: node_js
branches:
  only:
    - master
notifications:
  email: false
node_js:
  - '10.20.1' # I've added the same version as in my machine
script:
  - npm run lint
  - npm install -g codecov # Tool for code coverage
  - npm run test
  - codecov -f coverage/*.json
after_success:
  - codecov
  - npm run semantic-release
branches:
  except:
    - "/^v\\d+\\.\\d+\\.\\d+$/"

We have defined a set of instructions, such as which branch to build, nodeJS version, scripts to run, and what to do after success. If for some reason our lint or tests fail, the build will also fail - and no version is generated.

Semantic release

Speaking about version generation, you might have noticed the script npm run semantic-release. We are missing this script - but we will add it shortly.

Semantic Release is a tool for automatic package release and versioning.

As seen on their website:

semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.

Fortunately, they also provide an awesome package that will help us getting everything configured. If you have "npx" please open the terminal at the root folder and run npx semantic-release-cli setup.

If "npx" is not available, install the tool globaly with npm install -g semantic-release-cli and then run semantic-release-cli setup.

The cli will prompt you for your Github and npm username and credentials. The tool will use them to setup the required access tokens, so travis will be able to push your code to npm.

Your package.json file should now include a new "semantic-release" script a few dependencies and an updated value for version property.

Now we should also update the "main" property of our package.json and include a publish config key with the access type. As to use npm for free packages must be public, this configuration must be present.

...
  "main": "src/index.js",
  "publishConfig": {
    "access": "public"
  },
...

And finally run npm install just to update our package-lock.json.

Release

With this, we have everything ready to create a new commit and push our changes. Once we do this, travis will now load our project, build, create a new release, tag, and push it to the previous organization we created earlier on npm.

Run git add -A and npm run commit to create a new commit. Note that only some commit types generate a new release. I recommend picking the "feature" for this commit.

You can keep track of travis build by going to https://travis-ci.org/dashboard/builds and clicking on your repository name.

If everything goes as expected, your package should now be live! You can see it in your dashboard https://www.npmjs.com click on your profile -> packages, then on the left click on your organization name, and voila 🎉.

Congratulations! Your first package is live!

You can test it right away by installing it locally with:

npm install --save @YOUR_ORGANIZATION/mood-sentences or test mine with npm install --save @varandas/mood-sentences.

You can check this finished chapter on github https://github.com/AndreVarandas/mood-sentences/tree/master

Thanks for reading!
Happy coding 🎉