DEV Community

Cover image for Setup NodeJS for production with Babel
Anjan Shomooder
Anjan Shomooder

Posted on

Setup NodeJS for production with Babel

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
Enter fullscreen mode Exit fullscreen mode

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

yarn add express
Enter fullscreen mode Exit fullscreen mode

Let's install some dev dependency.

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

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'
Enter fullscreen mode Exit fullscreen mode
  • @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
Enter fullscreen mode Exit fullscreen mode

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}`))
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

scripts:

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

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))
})
Enter fullscreen mode Exit fullscreen mode

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 work 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.

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.

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.
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

Email: thatanjan@gmail.com

linkedin: @thatanjan

portfolio: anjan

Github: @thatanjan

Instagram (personal): @thatanjan

Instagram (youtube channel): @thatanjan

twitter: @thatanjan

Blogs you might want to read:
Eslint, prettier setup with TypeScript and react
What is Client-Side Rendering?
What is Server Side Rendering?
Everything you need to know about tree data structure
13 reasons why you should use Nextjs

Videos might you might want to watch:






Discussion (0)