Simple Node App

We will first setup a simple NodeJS app without any http or server behavior, to make it simpler.

Create Project

Create the project folder

mkdir scv-react-backend
npm init -y

Setup Babel

Now install babel

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0

Create a file .babelrc

{
  "presets": ["es2015", "stage-0"]
}

Create an index.js file

const helloWorld = () => console.log('Hello!')
helloWorld()

Edit package.json to add a "start" script

...
"scripts": {
    "start": "babel-node -- index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Now run our app

npm start

It should display something like

> babel-node -- index

Hello!

Add nodemon

We will add nodemon so that it will automatically reload the app on everychange

npm install --save-dev nodemon

Now we will update the start script in package.json

"start": "nodemon --exec babel-node -- index"

Start it again

npm start

And you should see something like

> nodemon --exec babel-node -- index

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node index`
Hello!
[nodemon] clean exit - waiting for changes before restart

Try editing the index.js file, and it should live reload the changes

Add eslint

We will add an static code analyser (aka linter). We will use eslint

npm install --save-dev babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-react

Now we will create a file named .eslintrc to configure it

{
  "parser": "babel-eslint",
  "extends": "airbnb-base",
  "rules": {
    "comma-dangle": [
      2,
      "never"
    ],
    "semi": 0,
    "max-len": 0,
    "no-multiple-empty-lines": 0,
    "object-shorthand": 0,
    "padded-blocks": 0
  }
}

This config extends airbnb base preset. It also has 3 rules customized (avoid checking max line length and avoid requiring semicolon for all lines)

Lets add a new script to package.json to run this

"scripts": {
    "start": "nodemon --exec babel-node -- index",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint"
  },

Now you can run the linter like this

npm run lint index.js

You will probably see a warning because we are using console.log() call as example.

Don't worry about that.

Testing

We will now setup the testing framework to start testing right away.

npm install mocha chai --save-dev

Create the test folder and a sample test

mkdir test
vi test/hello_spec.js

With the following content

import chai from 'chai'
const expect = chai.expect

import hello from '../index'

describe('hello', () => {

  it('should return a greeting to the parameter', () => {
    const greeting = hello('world')
    expect(greeting).to.be.equal('Hello world!')
  })

})

And update index.js

const helloWorld = (to) => 'Hello ' + to + '!'

export default helloWorld

Now we will setup a new script in package.json to launch the test.

"scripts": {
    "test": "export NODE_PATH=./ --compilers js:babel-register --recursive",
}

Now lets try it

npm test

You should see something like this

> [email protected] test /Users/jfernandes/dev/data/repo/scv/builder-react-scv/blah
> export NODE_PATH=./ && mocha --compilers js:babel-register --recursive



  hello
    ✓ should return a greeting to the parameter


  1 passing (88ms)

Fixing eslint

We should update the script so that eslint also includes the tests.

Edit package.json and add

"lint-all": "eslint index.js test/*"

Now if you run

npm run lint-all

You will see many errors complaining about "describe" and "it" as being unknown functions.

We need to tell to eslint that any content below "test" folder is a "mocha" code.

Create a file test/.eslintrc with the following content

env:
  node: true
  mocha: true

Now run again