How To Setup An Express JS Server With Nodemon and Babel

(Hi there, updated version of this tutorial can be found here)

I recently got back into actively writting Web Apps using React JS and one of the things I found really interesting after a two year hautus from Javascript was how ES6 was simplifying things.

After a couple of weeks being used to ES6 syntax in React — I needed to spin up a small server using Express JS and MongoDB but most tutorials I read still used ES5 syntax and I wasn’t having it. I did my own research and I found an easier way to setup an Express JS server project to use Babel for ES6 syntax and Nodemon for autoloading — which I am going to share with you.

Now if you are new to Javascript ES6 I would encourage you to checkout the article below to see the difference between it and ES5.

What’s the difference between JavaScript and ECMAScript?

All caught up? great ,let’s do this.

Setting Up Express Server

First thing is we are going to create a folder called express_server and initialize npm using the command following codes.

mkdir express_server 
cd express_server
npm init

Running npm init will trigger a cli wizard which will ask you several questions. After all these questions you should have package.json file created which looks like this.

{
"name": "express_server",
"version": "1.0.0",
"description": "",
{
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now that we have the package.json file, let’s start installing the necessary packages to get our Express js server up. The first package we will install is Express JS itself.

npm install express 

After installing Express JS create a js file called index.js using the command touch index.js and add the following lines:

var express = require('express')
var app = express()
app.listen(3400, function()
{console.log(`Server is listening on port 3400`)})
module.exports = app;

With these few lines you can run the server using this command in your terminal.

node index.js

You will see the Server is listening on port 3400 in the terminal.

Let’s Refractor The Code To Use ES6 Syntax

As of now we are still using ES5 syntax, so let’s setup our project to use the sweet stuff offered by ES6. For this we are going to install a couple of Babel related packages.

npm install babel-cli babel-preset-env babel-loader babel-core --save-dev

Inorder to ensure that when ever we make any changes to any of the files in our project and the server is restarted to reflect those changes automatically — we will install nodemon using the following command.

npm install nodemon --save-dev

The flag save-dev flag is used because these packages are only needed in development environment and are not necessary in the production environment.

After installation, open package.json and edit scripts by adding start key as shown below. This will tell node to process ES6 syntax using Babel and nodemon to watch for any changes in the server.js file and all its imports. Your package.json should look like this.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js --exec babel-node --presets babel-preset-env",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "nodemon": "^1.18.4"
  }
}

After these changes, you can now open index.js and refractor the code to use ES6 syntax like import and arrow functions.

import express from 'express'
const app = express()
app.listen(3600,()=>
console.log(`Server is listening on port 3400`))
module.exports = app;

When done, shutdown the server if it is running using ctrl+z on windows or linux and restart it using the command npm start instead of the earlier node index.js command. You should see the message:

If you make any changes to the file, nodemon will automatically restart the server for you.

Well that is it. At this point you can install any packages you want to complete your Express JS server and you still be able to use all the new stuff offered by ES6 — for a recap on those you can read

Olivier J.M

‘s article below.

Javascript features you don't want to miss

That’s is all from me, you can checkout the project here:

Thanks for reading and happy coding!

( I updated most of the configurations so follow this tutorial instead)

How To Write An Express JS Server Using Test Driven Development