Setting up a NodeJS/Express Application with Babel

Setting up NodeJS application with Babel

ECMAScript is a JavaScript Standardization which gets updated every year, it is a good practice to update our code as well.

Sometimes, the browser isn’t compatible with the latest JavaScript standards. To solve this kind of problem, we need something like a babel which is nothing but a transpiler for JavaScript.

Thus, in this little tutorial, I will be sharing how we can configure babel for a simple NodeJS Express application, to enable us use the latest ES6 syntax in our application.

Babel Setup

Firstly, we need to install three main packages to setup babel in the project.

· babel-core — babel-core is the main package to run any babel setup or configuration

· babel-node — babel-node is the package used to transpile any version of ES to plain JavaScript.

· babel-preset-env — this package enables us to use new and upcoming features which node.js is yet to understand. New features are always new and will probably take time to implement in NodeJS by default.

Good to know:

Mainly, the reason for using the babel is to make use of JavaScript new features in the code base. we don’t know whether the NodeJS in the server will understand the particular code or not unless it is a vanilla JavaScript.

So, it is always recommended to transpile the code before deployment. there are two kinds of babel transpiling code.

· One is for Production

· One is for Development

Development Setup

$ npm init
$ npm install — save express body-parser cors nodemon

Here, we initialize the package.json and install the basic express server with nodemon.

Next, we need to install @babel/core, @babel/node and @babel/preset-env packages.

$ npm install @babel/core @babel/node @babel/preset-env

After that, we need to create a file called .babelrc at the root directory of our project and inside this file, we paste the block of code below.

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

Now, the setup is ready. we need to create a script to transpile our code on run time. To do this, edit the package.json file and add this:

“scripts”: {
    “start”: “nodemon — exec babel-node index.js”
}

Finally, create an index.js file at the root of the project directory and add the following code.

import express from ‘express’;
import bodyParser from ‘body-parser’;
const app = express();
app.use(bodyParser.json());
app.get(‘/’,(req,res) => {
    res.send(“Welcome to Node Babel”)
})
app.listen(5000,() => {
     console.log(`app is listening to port 5000`);
})

To start the application, run the following command:

$ npm run start

On navigating to the URL:http://localhost:5000, you will see the output like Welcome to Node Babel on your browser

Production Setup

In production, we cannot transpile codes at runtime. hence, what we need to do is, to compile the code into vanilla javascript and deploy the compiled version to the node.js production server.

To have our codes transpiled to vanilla Javascript, edit the package.json file and add the block below in the scripts tag:

“scripts”: {
    “build” : “babel index.js — out-file index-compiled.js”,
    “start”: “nodemon — exec babel-node index.js”
}

Babel compiles the index.js file and writes the compiled version in index-compiled.js

Meanwhile, when you run the command, you will get the compiled version like

Finally, after compilation, we can now need to deploy the compiled version in the NodeJS production server.

Feel free to like, share and comment on my tutorials, Hire me to write or do a gig for you and don’t forget to follow me on twitter! Stay Hungry.