Setting up Node.js/express server with babel, eslint, and prettier

Posted by Lukas Horakon 04 April, 2020
Feel like sharing?
Setting up Node.js/express server with babel, eslint, and prettier

In this tutorial, we will set up Node.js/express server with babel to enable all ES6 features, nodemon to enable server reloading while developing, eslint for linting errors in the code, prettier for code formatting, and jest for unit testing.

tl;dr

You can fork or clone the template with everything already set up from the express-starter GitHub repository.

Prerequisities

This article assumes you have Node.js installed on your machine. If not, download Node.js and follow the installation instructions. If everything went well, you should see your Node version by running node --version in your terminal. You will also need a CLI for node package manager. In this tutorial I'll be using Yarn, but feel free to use npm (npm is distributed with node.js), whatever you're comfortable with. Moving on...

Initializing the environment

First of all we need to create a folder for our app. For the sake of simplicity, we'll call it an "express-starter".

$ mkdir -p express-starter/{src,dist}
$ touch express-starter/src/main.js
$ cd express-starter

The commands above create the following folder structure:

express-starter
├── dist
└── src
    └── main.js
project directory structure

Now that we've created the folder, let's initialize git and prepare our package.json file. Initializing git repository is optional, but I would highly recommend it.

$ git init
$ yarn init -y

When using npm:

$ git init
$ npm init -y

After running those steps, we should have a folder with a package.json file in it which should look something like this:

{
  "name": "express-starter",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Your Name <[email protected]>",
  "license": "MIT"
}

Install dependencies

Now that we have the repository initialized, we need to install the dependencies.

$ yarn add express body-parser
$ yarn add --dev @babel/cli @babel/core @babel/node @babel/preset-env nodemon prettier jest babel-jest eslint eslint-config-airbnb-base eslint-plugin-import

or with npm:

$ npm install --save express body-parser
$ npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env nodemon prettier jest babel-jest eslint eslint-config-airbnb-base eslint-plugin-import

Here we've installed express and body-parser middleware as dependencies and Babel, nodemon, Prettier, and Jest as dev dependencies. Dev dependencies are not packaged when the app is built for production.

Configuring the environment

We have all the packages installed, let's move on to configuration of the environment.

Babel config

Let's start with configuring Babel. In order to do that, we need to create a .babelrc file in the root of our app directory with the following contents:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

.babelrc

This will tell babel to transpile the code according to the environment we are using (for example node v12).

Prettier config

We'll move on to configuring Prettier. Prettier will format our code according to the settings we provide. As with Babel, we need to create a config file in the root of your app, but this time the name will be .prettierrc. I'll provide example of config file, but feel free to adjust it to your code style needs. Have a look at all the options provided by prettier.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
}
.prettierrc

Eslint config

For eslint config I went with Airbnb's eslint rules, which I usually use on my projects as a base. to set this up, create a .eslintrc file in the root of the directory with following content and you should be set up:

{
  "extends": "eslint-config-airbnb-base"
}

Putting it all together in package.json

Now that we have all the config files in place, let's put it all together in package.json file. Open your package.json file in your favorite editor and let's first set up some scripts that we'll need to develop, test, format, and run our app. Have a look at the scripts key we'll add to our package.json file:

{
  "name": "express-starter",
  "version": "1.0.0",
  "main": "dist/main.js",
  "repository": "[email protected]:lhorak/express-starter.git",
  "author": "Lukas Horak <[email protected]>",
  "license": "MIT",
  "scripts": {
    "develop": "nodemon --exec babel-node src/main.js",
    "build": "babel src --out-dir dist",
    "lint": "eslint src/**/*.js",
    "test": "jest",
    "format": "prettier --write \"src/**/*.{js,json,md}\""
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "jest": "^25.1.0",
    "nodemon": "^2.0.2",
    "prettier": "^1.19.1"
  }
}
package.json

So we've added five new scripts to our package.json file. The first one, develop runs a nodemon together with Babel, so every time you make a change, the server restarts and serves the changes. To start the script, you just need to run yarn develop in the root directory of the project.

Next is a build script. When you run yarn build, the code is transpiled using Babel and the output is written to the dist directory. This code should be used in production.

To run the unit tests, you simply run yarn test in command line. When no file matcher is configured, jest looks for these files: /tests//.[jt]s?(x), **/?(.)+(spec|test).[tj]s?(x) so for example, any file that ends with .test.js would be run by jest.

If you want to runt eslint, run yarn lint and you'll get the output with warnings and errors in your code.

Last script is format. When you run yarn format, prettier kicks in and formats all the js, json, and md file in your source directory (src). It's possible that your editor has support for formatting files using prettier, if it does I'd suggest setting that up. I'm using VS Code, where I have formatOnSave configured, so every time a save a file, it gets automatically formatted according to Prettier settings.

The final app structure should be looking like this:

express-starter
├── dist
├── node_modules
├── package.json
├── src
│   └── main.js
└── yarn.lock

Running an example app (Hello world!)

Now we should have everything set up to build our "Hello world!" express endpoint. Go on and open out the src/main.js file and add the following content in:

import express from 'express';

const PORT = 3000;
const app = express();

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(PORT, () => console.log(`Example app listening on port ${PORT}!`));
src/main.js

Save the file, go to command line, make sure you're in the project root directory and run yarn develop. If everything is working fine, you should get the following output:

$ nodemon --exec babel-node src/main.js
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node src/main.js`
Example app listening on port 3000!

To test out that our express server is working, open up another terminal window and run the following script:

$ curl http://localhost:3000/

You should get the Hello world! response if everything is working fine. Congratulations! You've just created a simple Node.js server. If you want to know more, head out to express documentation to learn more how to build your server app.

Building for production

Building and running the app in production is pretty straightforward. If you want to build the app for production, just run yarn build and you'll have the transpiled code in the dist directory. To run the app, in command line, run node dist/main.js and this command will serve the transpiled code.

Wrapping up

If you've got through the tutorial up until here, you should have a good setup for your server app written in JavaScript using express, running in Node.js. You can get the whole source code from this tutorial in the express-starter repository on GitHub.

If you have any questions or suggestions, you can reach me on via twitter.

Happy coding!

That's it!
Have questions? Follow and message me on Twitter @lhorak_cz
Lukas Horak
Lukas HorakFull-stack JavaScript Developer@lhorak_cz
Share this post
Copyright © 2020 Lukáš Horák. All rights reserved. JavaScript full‑stack developer