Using ES6 in Node JS Server

How to setup Node JS Server with ES6, Babel, & Nodemon

At the end of this tutorial you will be able to use ES6 syntax to write your Node Server

    import NodeServer from "./server/NodeServer"
    import ExpressServer from "./server/ExpressServer"
    import dotenv from "dotenv"
    dotenv.config()
    // Start Node Server
    const WebServer = new NodeServer();
    //Start Express JS Server
    const expressServer = new ExpressServer();

TLDR; See the final project

Fork the Project : https://github.com/hiteshsahu/Node-JS-ES6

Build Steps

Install Node js and validate if Node JS is installed properly
node -v

Create project directory and initialize Node package
mkdir nodeapp && cd nodeapp && npm init -y

Create a src folder in your project's root directory to keep server code.
mkdir src

Create Index.js in src folder as starting point for Server

Set up Babel for precompiling ES6 into JavaScript

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Install Babel

npm install --save-dev @babel/core @babel/cli

Install Babel Preset & Class Properties Plugin

npm install @babel/preset-env --save-dev
npm install --save-dev @babel/plugin-proposal-class-properties

@babel/preset-env Allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/plugin-proposal-class-properties transform ES6 class synthecic sugar into JavaScript __Prototype__

Create .babelrc file in your project's root directory & add the following code in .babelrc

{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}

Watch File change with Node Monitor

Install Nodemon
npm i -d nodemon
npm install rimraf --save-dev

Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Update package.json by adding following line for precompiling ES6 and allowing nodemon to restart server when file changes

"scripts": {
+ "build": "babel src -d dist"
+ "start": "npm run build && node dist",
+ "restart": "rimraf dist && npm run start",
+ "dev": "nodemon --exec npm run restart"
}

Create nodemon.json file in your project's root directory.
Add src folder in watchlist by adding following code in nodemon.json
{"watch": ["src"]}

Now You Can write Your Server in ES6 Syntax

Here are examples of writing Node Server using Express JS and plain Node JS

Finally Run the project

npm run dev