Chai Phonbopit
Jun 1, 2018 · 3 min read

Today, I am going to create my Node.js starter/boilerplate inspired by Hackathon Starter but before archive that goal, I have a lot of thing to setup. e.g. ESLint + Standard for check and verify my code style, Prettier for code auto format and Babel for transpile my code (ES6+) to ES5 and Jest for testing library.


Initial Project

First step, I initial project with yarn that will automatically create package.json for you

yarn init

Then, I install Hapi.js and ecosystems

yarn add hapi joi boom inert vision hapi-auth-jwt2

EditorConfig

The first one to setup is EditorConfig, that’s make sure you can open a source code with the same space or tab in different machine or IDEs/Text Editor

My .editorconfig file is to set JavaScript file to 2 space for indent and the rest is 4 space per indent.

root = true[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 4
[*.js]
indent_style = space
indent_size = 2

Prettier

Install Prettier with yarn

yarn add prettier --dev

And create .prettierrc file

{
"semi": false,
"singleQuote": true
}

and also add script for format code with prettier to package.json like this

{
"scripts": {
"p": "prettier --write 'src/**/*.js'",
"p:w": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}
}

I need to install onchange for watch a file changed.

yarn add onchange --dev

ESLint

Next step, I setup my ESLint with Standard, I created .eslintrc file with:

{
"extends": [
"standard",
"prettier",
"prettier/standard"
],
"plugins": [
"import",
"prettier",
"standard"
],
"parserOptions": {
"ecmaVersion": 2017
},
"env": {
"node": true,
"es6": true,
"jest": true
},
"rules": {
"space-before-function-paren": 0,
"new-cap": 0,
"prettier/prettier": 2
}
}

And install dependencies for Prettier and Standard work fine together.

yarn add eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard --dev
Error log when you run `yarn lint`

Babel

Add script below to .babelrc file

{
"presets": ["env"],
"plugins": ["transform-runtime"]
}

and install dependencies for Babel

yarn add babel-core babel-preset-envbabel-plugin-transform-runtime --dev

Server.js

and then my server.js look like this:

import Hapi from 'hapi'

const server = Hapi.Server({ port: 5555 })

const init = async () => {
server.route({
method: 'GET',
path: '/',
handler: (req, h) => ({ message: 'Hello Hapi.js' })
})

await server.start()
console.log('Server is running')
}

init()

Jest

Install Jest for testing

yarn add jest babel-jest --dev

Next step setup Jest, normally you don’t need to setup anything but If you want more configuration you have to create jest.config.js (For my case I setup Code Coverage) like this

module.exports = {
collectCoverage: true,
collectCoverageFrom: [
"src/**/*.js",
"!**/node_modules/**"
],
coverageDirectory: "coverage"
}

I collect a files inside src/**/*.js for code coverage, Jest will generated code coverage to coverage folder automatically.


Conclusion

Lastly, combined together with scripts in a package.json file

"scripts": {
"lint": "eslint src --color",
"build": "babel src --out-dir dist --ignore node_modules",
"p": "prettier --write 'src/**/*.js'",
"p:w": "onchange 'src/**/*.js' -- prettier --write {{changed}}",
"test": "jest"
}

Happy Coding ❤️

Today I Learned ❤️Chai

Chai's learning journey about Web development (Node.js + React), Lifestyle, Travel and Self Improvement.

Chai Phonbopit

Written by

I make web stuff with JavaScript (Node & React), Blogger at https://devahoy.com 🤖

Today I Learned ❤️Chai

Chai's learning journey about Web development (Node.js + React), Lifestyle, Travel and Self Improvement.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade