The minimal Node.js with Babel Setup

    Follow on Twitter  

This tutorial is part 2 of 2 in the series.

I have always been of the understanding there are no common sense rules about how to create a minimal Node.js application with Babel. In my search for these answers, it seemed that every tutorial I came across showed something different. As a result, I wanted to streamline this project setup for my readers and myself, so I developed a common approach for Node.js applications with Babel. I think it is a good foundation for learning JavaScript on the command line, building sophisticated Node.js projects on top of it, releasing it as node package (library) on npm as an open source project, or to build a RESTful or GraphQL server on top of it. The final project you are going to implement here can be found in this GitHub repository.

Node.js Project Setup

For any new project, there has to be a folder to allocate its configuration, and more importantly, its source code. This folder usually resides in another folder where all your other projects are found. To get started with your new project, create its folder on the command line or in your file explorer, and navigate to it.

mkdir my-project-name
cd my-project-name

Once inside the project folder, you can initialize it as npm project. Adding the -y shorthand flag tells npm it should take all the defaults. If you leave the flag out, you will need to specify the information about your project manually.

npm init -y

You can checkout the package.json file after initializing your project as an npm project, and it should be filled with your defaults. To change them, type the following into the command line:

npm config list

npm set init.author.name "<Your Name>"
npm set init.author.email "you@example.com"
npm set init.author.url "example.com"
npm set init.license "MIT"

After setting up your npm project, you can install node packages (libraries) to your project with npm. Once you install a new node package, it will be stored in your package.json file. After all, your project is a node package, too. You can use it to open source this project on npm later.

Next, on the command line or in your editor/IDE, create a src/ folder for your project’s source code. In this folder, create a src/index.js file as an entry point to your project:

mkdir src
cd src
touch index.js

To begin, introduce a console.log statement in the file to make sure your setup is running:

console.log('Hello Node.js project.');

When you go on the command line again, you can run this file with Node.js from your project’s root folder:

node src/index.js

A statement log appears in the command line after the script is executed. Next, move this script into your package.json file, because that’s where all your project’s scripts will end up eventually.

{
  ...
  "main": "index.js",
  "scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

On the command line, run the same script as before, except with npm start . Every time you change the underlying start script in the package.json file’s npm scripts, you only need to type npm start on the command line without the specifics of the script. Try creating more npm scripts for your needs like testing and deploying in the package.json file for this project later.

Node.js with Nodemon

The only remaining concern is that you have start the script every time you want to try your source code. You can change this with an always-running node process. To remedy this, install the commonly used nodemon library on the command line as development dependency to your project.

npm install nodemon --save-dev

Next, exchange node with nodemon in your npm start script:

{
  ...
  "main": "index.js",
  "scripts": {
    "start": "nodemon src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

When you run your application with npm start from the command line, it should keep running. The best part is that the script will execute again once you change the source code. Try adjusting your source code in the src/index.js file and see what happens in your command line.

console.log('Hello ever running Node.js project.');

This little adjustment to the environment gives developers a powerful tool, because the node process executes again once you change your code. If you introduce a bug, you will see a stack trace in the command line, and the script runs again without any flaws.

Node.js with Babel

You should be able to develop a Node.js application by now, but there is more to setting up a sophisticated Node.js project that is capable of using recent JavaScript language features (ECMAScript) that are not included in the recent Node.js versions. That’s where Babel becomes useful. You can install it from the command line for your project’s development dependencies.

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

Next, add it to your npm start script:

{
  ...
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

Nothing should change when you run the application again, thought that’s just the surface. Under the hood, Babel transpiles your code to vanilla JavaScript. When you use an upcoming JavaScript language feature, which hasn’t been introduced in Node.js, you can still use the feature in your source code. Babel makes sure that Node.js understands it. However, there is still one crucial step to include upcoming language features with Babel. You can activate different upcoming JavaScript features by adding them as presets to Babel. Let’s add the most common used Babel preset to your application:

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

Now, in the project’s root folder, create a .babelrc file in the command line:

touch .babelrc

In this configuration file for Babel, you can include the two recently installed dependencies for unlocking the upcoming JavaScript language features.

{
  "presets": [
    "@babel/preset-env"
  ]
}

Now you can include upcoming JavaScript features in your src/index.js file. If you run into problems because your desired feature is not working, check whether there exists a dedicated Babel preset for it.

Environment Variables in Node.js

It is important to set data like private API keys and user credentials like password, username, and email as environmental variables, but without exposing them in the source code. For this, we put environmental variables in a dedicated file that is safe from external access. The .env file lets you set Node.js environment variables as accessible in your project’s source code. On the command line, in your project’s root folder, create a .env file:

touch .env

Now you can place any key value pair that you don’t want in your source code in this new file.

MY_SECRET=mysupersecretpassword

dotenv is another helpful library to make environmental variables accessible in the source code. First, install it on the command line as a normal dependency:

npm install dotenv --save

Second, import it into your src/index.js file to initialize it. The environment variable from your .env file is now accessible in your source code.

import 'dotenv/config';

console.log('Hello Node.js project.');

console.log(process.env.MY_SECRET);

Start the npm script again, and you should see the environmental variable in the command line. Now you are able to store sensible data separate from the source code.

Now, consider the following code for your src/index.js file, where a function is imported from another file from this project.

import saySomething from './my-other-file.js'

import 'dotenv/config';

If you use an environment variable in your src/my-other-file.js, it is undefined because the initialization of the dotenv package happens after the import in your src/index.js file. To fix it, put the dotenv initialization before your local file imports:

import 'dotenv/config';

import saySomething from './my-other-file.js'

That’s a basic understanding of Node.js environment variables. They should be used to keep sensible data secure in JavaScript applications, but shouldn’t be shared on public GitHub repositories when using git.

Exercises:

  • Confirm your source code
  • Ask yourself:
    • What’s npm init doing when you setup your Node.js project?
    • What benefit is Nodemon giving us?
    • Why do we need Babel?
    • Why do we need Environment Variables?

This guide has shown you how to create a Node.js project from scratch, and how you can introduce upcoming JavaScript features in your Node.js environment using Babel. You have seen how npm scripts are used to start, test, and deploy applications, and how environment variables secure sensible data like private API keys and user credentials. The finished product is a node package that can be open sourced on npm, another rewarding aspect of working with the Node.js ecosystem.

This tutorial is part 1 of 2 in the series.

This tutorial is part 1 of 2 in the series.

Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get the Book for free
comments powered by Disqus

Never miss an article about web development, JavaScript and self-growth.

Take Part

Join 21.000+ Developers

Learn Web Development with JavaScript

Tips and Tricks

Access Tutorials, eBooks and Courses

Personal Development as a Software Engineer