Configuring babel for Node.js/Express Server

In this article, we will see how to configure babel for Express server. Configuring babel for Node.js/Express Server. To learn more about Node.js

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

Sometimes, the browser doesn'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.

Babel Setup

Firstly, we need to install two 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 from ES(Any Standard) to plain javascript.
  • babel-preset-env - this package is used to make use of upcoming features which node.js couldn't understand. like, some feature will be new and take time to implement in the node.js by default.

Best Practice

Mainly, the reason for using the babel is to make use of Javascript new features in the codebase. we don't know whether the node.js 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

1$ npm init --yes
2$ npm install --save exress body-parser cors
3$npm install --save nodemon

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

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

1$ npm install @babel/core @babel/node --save-dev

After that, we need to create a file called .babelrc which contains all the babel configuration.

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

Now, the setup is ready. we need to create a script which transpile our code on run time.

1"scripts": {
2 "dev": "nodemon --exec babel-node index.js"
3 }

Capture 1

Finally, add the following code in the index.js and run the script.

1import express from "express"
2import bodyParser from "body-parser"
3
4const app = express()
5
6app.use(bodyParser.json())
7
8app.get("/", (req, res) => {
9 res.send("Hello Babel")
10})
11
12app.listen(4000, () => {
13 console.log(`app is listening to port 4000`)
14})

Capture new

1$ npm run dev

Finally, you will see the output like Hello Babel.

Production Setup

Mainly, we cannot transpile the code in run time in production. So, what we need to do is, to compile the code into vanilla javascript and deploy the compiled version to the node.js production server.

Add the following command for building a compiled version of code

1"scripts": {
2 "build" : "babel index.js --out-file index-compiled.js",
3 "dev": "nodemon --exec babel-node index.js"
4 }

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

Capture adasda

Capture 1212

Finally, we need to deploy the compiled version in the node.js production server.

To Learn Babel in-depth, you can refer to this video from Brad Traversy

https://www.youtube.com/watch?v=iWUR04B42Hc

That's for this article, we will see more about babel and webpack in the upcoming articles.

Until then, Happy coding :-)

To Read More

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

Building a Production - Ready Node....

In this article, we will see how to build a Nodejs, TypeScript Application and d...

Nginx for Front-end Developers

This article is to explain Nginx for Front-end Developers in a much simpler way....

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...