Basic Node.js setup every JavaScript backend developer needs to know.

Starting out as a self taught JavaScript developer is not something easy to go by and many of us who have made it through the intolerable levels of hardship can testify. At least, I can tell an inspirational story about the same on a good day. Many times, developers learning to write code just don’t have to mind what’s happening behind the scenes of any program to learn a programming concept. We don’t have to open the multi-colored files appearing in the left or right pane of our freshly installed Integrated Environments(IDEs) else our heads will spin eight times more than what we are already going through to understand why there seems to be no clear explanation of what the this keyword is and how it is correctly and (incorrectly) used in JavaScript.

After taking several classes in Node.js and working on quite a number of full-stack JavaScript projects, I decided to write about how to create a basic Node.js application for myself and any other readers who need the foundation of JavaScript on the command line. This short blog post will get you up and running real quick on the fundamental concepts about setting up a Node.js application that will scale with much more sophisticated projects on top of it with either RESTful or GraphQL api’s.

Setting up the backend project

Usually, at least for the many projects I have worked on, a project will have a folder containing two sub folders in i.e a frontend folder and a backend folder. For this blog post, we shall concentrate on the backend folder and give it the project name we intend to use. To create this folder, navigate to the projects folder where you usually create your applications and run the following commands;

mkdir project-name
cd project-name

mkdir will create the directory with a specified project name and the second command will navigate you into the created folder.

In the project folder, run the code snippet below to initialize the project as an npm project. The -y or — yes is used to create the package.json file with the defaults of your project filled out otherwise you’ll be prompted to manually fill them out.

npm init --yes

After adding your package.son file, all node packages you’ll install from the node package manager(npm) will be added to this file.

In the root of your project folder, create a source directory and add an index.js file that’ll be the entry point to your project.

mkdir src
cd src
touch index.js

To see that this project is running, add a console.log statement to the index.js file and run node.

console.log("Hello World");

Make sure you are in the project root folder and run the following script

node src/index.js

You’ll see the statement Hello-World after your script is done running. Instead of manually typing the node script whenever you want to run it, you can add it your package.json file as shown below.

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

Now, run the script again by typing npm start in the command line and watch out for the output. Same words show up in the prompt as before, right?

Adding nodemon to the mix

Now, one setback we have is that we always have to press ctr+c to stop the running script and restart it every time we make some changes to our program. This is where nodemon comes in handy.

Add nodemon to your project as a development dependency.

npm install nodemon --save-dev

Replace the word node in the start script with nodemon as shown below.

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

Modifying the code in your index.js file won’t require you to restart the node script as before. Saved changes will automatically be detected and the script will be automatically restarted behind the scenes. Adding bugs to the code will show a stuck trace which will automatically resume when the code is bug free.

Adding babel to the mix

Babel is a transpiler, meaning that it will help convert recent JavaScript features(ECMAScript) to older versions that is supported by the browser(in frontend development) else will allow us to work with JavaScript features that are not yet supported in the recent Node.js versions.

Add babel to your project by installing it as a dev-dependency with the command

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

Add babel to your start script

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

Adding babel to the start script won’t show any visible difference in the execution of your code but will work behind scenes to make sure that features such as ES6 modules import statements are not supported(by the time I’m writing this article) by the recent node versions can be used. Upcoming JavaScript features can also be added as development dependencies by using presets.

To add upcoming JavaScript language features, run the command

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

Create a .babelrc file in the project’s root folder

touch .babelrc

You can now add the recently added preset for unlocking the upcoming JavaScript language features.

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

Adding environment variables to the mix(.env)

Setting data that is going to be accessible in many places within our code as environment variables is very important. However, it is also equally as important to store this data in a secure place such that the data is not exposed anyhow in our code. A .env file is used to store such data with a Node.js backend.

Add a .env file using the command line.

touch .env

This file will be the place where you add all your key-value pairs that you don’t want to expose in your code. For example, let’s add a pair for a frontend URL.

FRONTEND_URL=http://localhost:7777

Please note how there are no spaces around the key-value pair in the .env file. Many people add the spaces which often leads to bugs in their code.

dotenv is another useful library that is used to access the environment variables from anywhere in our code.

Let’s add it to our code as a normal dependency from the command line.

npm install --save dotenv

To access the environment variable from index.js in our code, you have to import dotenv and initialize it in src/index.js as shown below.

import 'dotenv/config';

console.log("Hello World");

console.log(process.env.FRONTEND_URL);

If you didn’t stop the running script, you should be able to see the environment variable in the command line. That is the best way of securing your environment variables and accessing them from anywhere within your code.

Thank you for reading through to the end, I hope this my first blog post added something to your JavaScript backend knowledge in one way or the other.

If you don’t mind, please leave a comment in the comments section about your experience on the blog post and how i can make it better. Like and share.