node/react -> github -> travis -> sonar

When programming I like to keep my code as clean and automated as possible.

I like sonar (does analysis on your code and provide you output how many duplicate, code smells, unused variables,..)

I like node.js / react.js for its quick prototyping and agile and others advantages. So lastly I was looking if I can have setup where I could automate my infrastructure  code -> push to  VCS (github) -> CI (travis) -> code analysis (Sonar).

Here are steps what you need to do:

  • github.com -> on project settings turn on “travis-ci” integration
    • github.com -> project -> settings -> Integration & services -> Add Service -> Travis CI
  • travis-ci.com -> make sure after code push code build is triggered
  •  sonarcloud.io – get started
    • create token here (I used this token in travis – see above)
    • define your organisation here
  • project:

.travis.yml
dist: trusty
sudo: required
addons:
sonarqube:
organization: "czechsource"
branches:
- master
- develop
jdk:
- oraclejdk8
script:
- sonar-scanner
cache:
directories:
- '$HOME/.sonar/cache'

sonar-project.properties
sonar.projectKey=czechsource:reactBlog
sonar.projectName=React.js blog
sonar.projectVersion=1.0
sonar.sources=src
sonar.language=js
sonar.sourceEncoding=UTF-8
sonar.branch=develop,master

Make sure you define sonacloud.io organization and token and use it in travis.

Github repo

travis info

sonarcloud info

Update: I am using git flow and find out that branches “develop” were not sent to sonar. Make sure you add them in .travis.yml as well as in sonar-project.properties files (marked them in bold)

Update2: there is another option using sonarqube-scanner-node project . (I am assuming your project is made by create-react-app by facebook)

  • yarn add sonarqube-scanner-node --dev
  • yarn test -- --coverage
  • package.json -> add in script section:  "sonarqube": "sonarqube-scanner-node"
  • from command line: yarn sonarqube -Dsonar.host.url=https://sonarcloud.io -Dsonar.organization=chowanioksource -Dsonar.sources=src -Dsonar.projectKey=chowanioksource:reactBlog  -Dsonar.login=<sonarcloud.io token>

 

Advertisements