Menu
Nodejs and Babel banner

Setup NodeJS with babel for production

In this blog I will teach you how you can set up nodejs with babel for production

The features that this project will have.

  • Absolute import path
  • Older nodeJs version compatibility
  • Automatic restart of the server after any changes in the development environment.

I have made a video about this topic. Watch the video to grasp the concepts.

If you like the video, Subscribe to the channel.

Alright. Enough Talk. Let's get started.

First, I will create a folder called nodejs-setup. Then inside the folder, I will initialize the package.json

mkdir nodejs-setup
cd nodejs-setup
yarn init -y

Now we need to install some packages. Let's install our only dependency.

yarn add express

Let's install some dev dependency.

yarn add --dev @babel/cli @babel/core @babel/node @babel/preset-env babel-plugin-module-resolver nodemon

Let's explore the devDependencies:

  • @babel/core: Babel is a transcompiler that compiles js code based on the given configuration. The babel does not do anything. Plugins do.
  • babel-plugin-module-resolver: This plugin allows us to write an absolute path instead of a relative path. Let's see a demo.
// Use Absolute path:
import MyUtilFn from 'utils/MyUtilFn'
// Instead of Relative path:
import MyUtilFn from '../../../../utils/MyUtilFn'

  • @babel/preset-env: Preset is a combination of a bunch of plugins. This preset will allow us to use next-generation javascript code. Then it will be compiled down to browser and nodejs compatible code. It also adds many features.

  • nodemon: nodemon is a tool to restart the server automatically whenever we change our source code so that we don't have to do it manually.

let's write some code. I will create an src folder where I will store all of my source files. Inside src create a file called index.js

mkdir src
touch index.js

Let's create a simple express server.

//index.js


import express from 'express'


const app = express()


app.get('/hello', (req, res) => res.send('hello world from cules coding'))


const port = process.env.PORT || 8000


app.listen(port, () => console.log(`Server is running on ${port}`))

Let's write some scripts in our package.json file.

// packagejson


{
    "name": "nodejs-setup",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "dependencies": {
        "express": "^4.17.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.13.0",
        "@babel/core": "^7.13.8",
        "@babel/node": "^7.13.0",
        "@babel/preset-env": "^7.13.9",
        "babel-plugin-module-resolver": "^4.1.0",
        "nodemon": "^2.0.7"
    }
}

scripts:

{
    "scripts": {
        "dev": "nodemon --exec babel-node src/index.js",
        "build": "babel  src -d build",
        "start": "yarn build && node build/index.js"
    }
}

Let's explore the scripts:

  • dev: This script will be used to start the development server. nodemon will automatically start the server when our code changes. But even before that nodemon will execute babel-node and will compile the src/index.js file.
  • build: This script will be used for production. babel will compile our code from the src folder to the build directory. babel will automatically create a build directory for you if it does not exist.
  • start: I will first run our build script. Then it will start our node server from the build directory.

If I show you the compiled code:

'use strict'


var _express = _interopRequireDefault(require('express'))


function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj }
}


var app = (0, _express['default'])()
app.get('/hello', function (req, res) {
    return res.send('hello world from cules coding')
})
var port = process.env.PORT || 8000
app.listen(port, function () {
    return console.log('Server is running on '.concat(port))
})

And that's how you can set up a nodejs project for development and production.

Shameless Plug

I have already made a Redux toolkit crash course on my youtube channel. Redux toolkit is a tool to set up and wok with redux easily

I have simplified everything for you by building a simple to-do application.

You can demo the application by going to this link . Don't forget to like, share and subscribe to Cules Coding.

project demo

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, please comment down below. You can reach out to me on social media as @thatanjan. Stray safe. Goodbye.

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

Demo

You can demo the website from here

Features

  • Static Blog pages will make the website load faster.
  • Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
  • Autocomplete search feature for the blog posts.
  • Real-time view counter and so on.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostHow to send emails from Node.js with SendInBlue