Let's Setup Babel in Node.js

Greetings!

Node.js is one of the most popular and most used backend technologies. It is used by many. I just want to create a project to play with node.js. Hence I thought to create a simple starter project with node.js and express (for myself or anyone who is interested).
I would like to use ES6+ features hence I'm using babel here. Other than that, node, express, body-parser, and cors will be added.

The source code is here.

What is Babel?

Bable is a JavaScript transcompiler that is mainly used to convert ES2015+ code into backward-compatible JavaScript code. What that means is we can use newer JavaScript features and babel will transcompile it for us to use in older JavaScript engines.

Steps

Create the project
Install dependencies
Setup babel
Create the express server

Create the project

We can initialize a node.js project using npm.

npm init -y

Install dependencies

Let's install our required packages.

npm install express body-parser cors --save

Install Babel

Babel is used to transpile the ES6+ code.

npm install @babel/core @babel/node @babel/preset-env --save-dev

Install nodemon

Nodemon is used to refresh the server without restarting for every change.

npm install nodemon --save-dev

Setup ES6 module

Add the below entry in package.json to enable ES6 modules.

"type": "module"

Add start entry

Add start entry point to package.json

"scripts": {
  "start": "nodemon --exec babel-node src/index",
  "test": "echo \"Error: no test specified\" && exit 1"
}

{
  "name": "babel-rest-starter",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon --exec babel-node src/index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Manjula Jayawardana",
  "license": "ISC",
  "description": "Node.js restful starter with babel",
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/node": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1"
  }
}

Setup babel presets

Create a file called .babelrc in the project and add it below.

touch .babelrc

{
  "presets": ["@babel/preset-env"]
}

Create the express server

Create index.js in src folder -> src/index.js and add the below content.

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get("/", (req, res) => res.json({ message: "Hello World" }));

app.listen(3000, () => console.log("app listening on port 3000"));

Run

npm start

curl localhost:3000

That is it. Future me will be happy ☺

Manju