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

1mkdir nodejs-setup
2cd nodejs-setup
3yarn init -y

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

1yarn add express

Let's install some dev dependency.

1yarn 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.
1// Use Absolute path:
2import MyUtilFn from 'utils/MyUtilFn'
3// Instead of Relative path:
4import 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

1mkdir src
2touch index.js

Let's create a simple express server.

1//index.js
2

3import express from 'express'
4

5const app = express()
6

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

9const port = process.env.PORT || 8000
10

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

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

1// packagejson
2

3{
4    "name": "nodejs-setup",
5    "version": "1.0.0",
6    "main": "index.js",
7    "license": "MIT",
8    "dependencies": {
9        "express": "^4.17.1"
10    },
11    "devDependencies": {
12        "@babel/cli": "^7.13.0",
13        "@babel/core": "^7.13.8",
14        "@babel/node": "^7.13.0",
15        "@babel/preset-env": "^7.13.9",
16        "babel-plugin-module-resolver": "^4.1.0",
17        "nodemon": "^2.0.7"
18    }
19}

scripts:

1{
2    "scripts": {
3        "dev": "nodemon --exec babel-node src/index.js",
4        "build": "babel  src -d build",
5        "start": "yarn build && node build/index.js"
6    }
7}

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:

1'use strict'
2

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

5function _interopRequireDefault(obj) {
6    return obj && obj.__esModule ? obj : { default: obj }
7}
8

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

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.

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 an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

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

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostHow to send emails from Node.js with SendInBlue