Abhinandan's Blog
ABHINANDAN ARYAL

anudwigna[at]gmail.com

HOME

Setting up a bare minimum ExpressJS project with babel

May 12, 2021

NodeJS ExpressJS babel

Introduction

ExpressJS is one of the most popular NodeJS framework for building Web Applications. Its simplicity, minimalistic approach, flexibility, scalability are some of the main traits that makes it so much popular among Web Developers. In other words, ExpressJS is a simplistic approach to building server side web applications in NodeJS.

Setting up an ExpressJS Application

First, create a folder for your project.

mkdir my-express-app

Change the directory to my-express-app-with-babel and initiate a nodejs app by issuing the following command:

npm init

Some options will be presented to you. Configure them as per your needs or you can skip these steps by issuing the following command:

npm init --yes

After the completion of above steps, a package.json file will be created.The only dependent package to create an ExpressJS application is "express". Now let us download this package by issuing the following command:

npm install express --save

After the successful installation of express package, the final package.json looks like this:

{
  "name": "my-express-app-with-babel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": "",
  "dependencies": {
    "express": "^4.17.1"
  }
}

We can clearly see that express is listed as dependency in the package.json. This also adds a folder named node_modules which contains the downloaded files related to packages. Now, let us add a file named index.js in the root of the project. This file will be the main starting point of our application. Add the following code to define an express application:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World from Express!');
});

app.listen(port, () => {
  console.log(`The app has been started at http://localhost:${port}`);
});

The code is self explanatory. We are importing the required express package and defining app and port to start the application. After that, a default route is defined and a server is started at the pre defined port. The application can be started by issuing the following command:

node index.js

Note: For the above command to work, you must have installed NodeJS. This is also tedious to issue this command every time we want to start our application. Later on, we will define some predefined scripts inside the package.json file which will make this process easier and also we will install package named nodemon which will help us to restart the application in case of any changes in the files.

Adding babel support to the project

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. This basically means that we can write our Javascript code in ECMASCRIPT 2015 and babel will convert thic code into compatible version for Browsers as all the browser do not implement all the latest features of ECMASCRIPT. Let us install babel and its supporting packages by issuing the following command:

npm install @babel/core @babel/node @babel/preset-env --save-dev

Now, lets download the package nodemon by issuing the following command:

npm install nodemon --save-dev

Also, lets modify the package.json file to include the start script so that we can easily start our application using simple npm start command. After the changes, the final package.json file looks like this:

{
  "name": "my-express-app-with-babel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/nodemon --exec ./node_modules/.bin/babel-node index.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": "",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/node": "^7.13.13",
    "@babel/preset-env": "^7.14.1",
    "nodemon": "^2.0.7"
  }
}

Now, the application can be started using the simple npm start command. Open up your browser and go to http://localhost:3000, where you will see that your application is running.

The code related to this article can be found here.