hiteshsahu / node-js-es6

Simple setup for using ES6 in Node JS server

Node JS With ES6

Getting sarted:

Clone or Fork the project

npm install

npm run dev

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

    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();

---

Build Steps

1. Install Node js and validate if Node JS is installed properly

node -v

2. Create project directory and init Node package

mkdir nodeapp && cd nodeapp && npm init -y

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

mkdir src

4. 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.

1. Install Babel

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

2. 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__

3. 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

1. 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.

2. 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"
}

3. Create nodemon.json file in your project's root directory

4. Add src folder in watchlist by adding following code in nodemon.json

    {"watch": ["src"]}
   

Finally Run the project

npm run dev