Configuring babel for Node.js/Express Server
Tags: showdev, webdev, tutorial, beginners
Published: 2019-07-19 19:01:06

---
title: Configuring babel for Node.js/Express Server
published: true
description: Configuring babel for Node.js/Express Server
tags: showdev,webdev,tutorial,beginners
canonical_url : https://cloudnweb.dev/2019/07/configuring-babel-for-node-js-express-server/
---

<!-- wp:paragraph -->
<p>In this article, we will see how to configure babel for Express server.  Configuring babel for Node.js/Express Server. To learn more about <a href="https://cloudnweb.dev/tag/node-js/">Node.js</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ECMAScript is a Javascript Standardization which gets updated every year, it is a good practice to update our code as well.<a href="http://es6-features.org"> ES6 Features</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Sometimes, the browser doesn't compatible with the latest javascript standards.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To solve this kind of problem, we need something like a babel which is nothing but a transpiler for javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Babel Setup</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firstly, we need to install two main packages to setup babel in the project.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>babel-core</strong> - babel-core is the main package to run any babel setup or configuration</li><li><strong>babel-node</strong> - babel-node is the package used to transpile from ES(Any Standard) to plain javascript.</li><li><strong>babel-preset-env</strong> - 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.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Best Practice</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, it is always recommended to transpile the code before deployment. there are two kinds of babel transpiling code.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>One is for Production</li><li>One is for Development</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Development Setup</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm init --yes
$ npm install --save express body-parser cors
$npm install --save nodemon</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Here, we initialize the <strong>package.json</strong> and install the basic <strong>express </strong>server with <strong>nodemon</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, we need to install <strong>@babel/core</strong> and <strong>@babel/node</strong> packages.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm install @babel/core @babel/node --save-dev</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, we need to create a file called <strong>.babelrc</strong> which contains all the babel configuration.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{
    "presets": [
        "@babel/preset-env"
    ]
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now, the setup is ready.  we need to create a script which transpile our code on run time. </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code> "scripts": {
    "dev": "nodemon --exec babel-node index.js"
  }</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":1024} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Capture-1-1024x380.png" alt="" class="wp-image-1024"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Finally, add the following code in the index.js and run the script.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import express from 'express';
import bodyParser from 'body-parser';

const app = express();

app.use(bodyParser.json());

app.get('/',(req,res) => {
    res.send("Hello Babel")
})

app.listen(4000,() => {
    console.log(`app is listening to port 4000`);
})</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":1025} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Capture_new.png" alt="" class="wp-image-1025"/></figure>
<!-- /wp:image -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm run dev</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Finally, you will see the output like <strong>Hello Babel</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Production Setup</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Add the following command for building a compiled version of code</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>"scripts": {
    "build" : "babel index.js --out-file index-compiled.js",
    "dev": "nodemon --exec babel-node index.js"
  }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Babel compiles the index.js file and writes the compiled version in index-compiled.js</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Meanwhile, when you run the command, you will get the compiled version like</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1029} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Capture_adasda-1024x307.png" alt="" class="wp-image-1029"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":1030} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Capture_1212-1024x545.png" alt="" class="wp-image-1030"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Finally, we need to deploy the compiled version in the node.js production server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Learn Babel in-depth, you can refer to this video from Brad Traversy</p>
<!-- /wp:paragraph -->


{% youtube iWUR04B42Hc %}

<!-- wp:paragraph -->
<p>That's for this article, we will see more about babel and webpack in the upcoming articles.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then, Happy coding :-)</p>
<!-- /wp:paragraph -->