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

I have made few project based videos with vanilla HTML, CSS, and JavaScript.

You will learn about:

  • Javascript intersection observer to add cool effects
  • DOM manipulation
  • Aligning elements with CSS positions.
  • How to make responsive websites.
  • How to create slide based webpage.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

You can also demo the application from here:

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.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites. See more of my work from here

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.

Screenshot

Homepage

More screenshots

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch: