Node JS for Beginners - Practical Guide (With Samples)
Tags: node, express, webdev, tutorials
Published: 2022-04-12 16:46:07

---
title: Node JS for Beginners - Practical Guide (With Samples)
published: true
description: A comprehensive introduction to NodeJS for Beginners - With Free Samples.
tags: nodejs, express, webdev, tutorials
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1tvvtmf6iqs291cyupk.jpg
canonical_url: https://blog.appseed.us/node-js-for-beginners-practical-guide/
---
Hello Coders!

In this article, we will set up a simple **NodeJS** application that will serve a nice web page styled with `Bootstrap 5`. In the end, we will use Docker to make the project deployable in production without any configuration hassle. For newcomers, [NodeJS](https://blog.appseed.us/node-js-for-beginners-practical-guide/) is a popular technology that uses JavaScript to implement performant backend features like authentication, database queries, and static assets management.

> Thanks for reading! Content provided by [App Generator](https://appseed.us/)

- 👉 `JavaScript` Short Introduction
- 👉 `Setting up` the environment
- 👉 Choose a `code editor`
- 👉 `Code a simple NodeJS Project`
- 👉 `Integrate Docker` (for deployment)
- 👉 Popular `NodeJS` Modules
- 👉 `Free NodeJS Starters`: [Berry](https://appseed.us/product/react-node-js-berry-dashboard), [Datta Able](https://appseed.us/product/react-node-js-datta-able), [Purity](https://appseed.us/product/node-js-react-purity-dashboard) (Chakra UI)
- 👉 `Free Resources` & Links

--- 

## ✨ What is JavaScript

`JavaScript` has become a really hot topic in the programming language. At the moment this article is written, JavaScript is known to be the most popular language in the world with over 69.7% of use in software development.

JavaScript is well known for the development of web apps but JavaScript can be used for a variety of purposes also: for native Mobile Applications we can use frameworks like React Native or Ionic, for Back-end Web Development we can use NodeJS, or Machine Learning.  

For more information regarding this popular programming language, feel free to access these free resources:

- 👉 [10 JavaScript concepts for React Beginners](https://blog.appseed.us/10-javascript-concepts-for-react-beginners/)
- 👉 [JavaScript and Vue -  Intro for Beginners](https://blog.appseed.us/javascript-vuejs-introduction-for-beginners/)

---

## ✨ `Setting UP` the environment

To get started, please head to the Node.js official website https://nodejs.org/en/ and download the stable version of Node.js that is recommended for most users. As of now, the recommended version is 16.14.2 as seen in the figure below (highlighted with a red border):

![NodeJS for Beginners - Download Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb0owmnzbmyokc9lbyi8.png)

Once downloaded, click on the installation file to install it on your PC. To ensure that Node.js is installed on your PC, open a terminal window and type:

```bash
$ node -v
```

If it is installed correctly, the above command would return the version of the Node.js that you just installed which in my case would be `16.14.2`.

---

## ✨ Choose a Code Editor

There are many code editors/IDEs like `IntelliJ IDEA` and Sublime Text that you can use for developing applications in NodeJS and it all comes down to personal preference to a great extent. However, Visual Studio Code (VS Code) is the most famous among developers according to the official [StackOverflow](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment) survey. For the purpose of this tutorial, I would also be using VS code not only because it is well known but because it is my personal favorite as well.

- 👉 [VsCode](https://code.visualstudio.com/) - official website
- 👉 [VsCode](https://code.visualstudio.com/Download) - download page

![NodeJS for Beginners - Install VsCode Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fot1zi2ics02v60vy8j8.png)

---

## ✨ Code a simple `NodeJS` Project

First thing is first, we name our project. Go to file explorer on your PC and create a folder with the name of the project that you want. You can create this folder anywhere. For this example, I have created a folder and named it *blog-sample-nodejs-introduction* as seen in the figure below:

![NodeJS for Beginners - Create NodeJS Project DIR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijh7yzb62wjwkcyj7ntu.png)

Now open VS code (kindly install it if you already haven’t by heading to https://code.visualstudio.com/ and downloading the stable build). In the VS code, open the folder that you just created, and now this will act as your workspace. All the files and code will be written inside this workspace.

Before we start creating files and begin coding, we need to perform one more step. And, that step is to run the following command:

```bash
$ npm init
```

This command will create a file called `package.json` and it is a file that is used to set up new or existing npm packages.

You can think of an `npm package` as a module that provides several functions and methods to ease our development process. When you will run the command `npm init`, it will ask for your input on various metadata like the name of the package, etc. which you can give according to your personal preference except for the attribute `main` as shown in the figure below.

For the “main” attribute, you need to enter the name of the entry file from where our backend server will begin running. We haven’t created that file yet, but I have named it server.js as the name should clearly reflect the purpose of the file and the code inside it. Here is how my `package.json` looks:

```json
{
  "name": "nodejs-article",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3"
  }
}
```

---

> **Installing the package**

Before we can begin writing our first lines of code for our NodeJS backend server we need to install a module called Express which is a minimal and flexible NodeJS web application framework that provides a robust set of features for web and mobile applications.

---

> **Writing the code**

Create a new file called `server.js` in the same directory in which you just created `package.json`. In the `server.js`, paste the following code:

```javascript
const express = require('express');
const app = express();
const port = 3000;
 
app.get("/api", (request,response)=>{
    response.send("Hello World")
})
 
app.listen(port, (req,res)=>{
    console.log(`Listening at port ${port}` )
 }) 
```

The above code simply responds with `Hello World` when we try to access the URL: `localhost:3000/api`. Once you have pasted the code run the following command in VS code terminal to run the server:

```bash
 $ node server.js
```

In the terminal you should be able to see the following output:

```bash
 $ node server.js
 Listening at port 3000 
```

You should see the following result on your web browser:

![Node JS for Beginners - Sample Project Browser Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/528lisfiuuueoieepq3r.png)

---

You have just managed to set up your first `NodeJS` Backend server, but hey what if you want to show some beautiful web page to your users using your NodeJS? This is exactly what we will be doing next.

The `express.static` is a function inside express that enables the server to serve static files like `HTML`, `images`, `CSS`, `JavaScript`, etc. In our case, we are serving the index.html and the assets folder together (the most simple case possible).

The final code of your `server.js` file should look like this:

```javascript
const express = require('express');
const app = express();
const port = 3000;
 
app.use(express.static('public'))   // <-- NEW

app.get("/api", (request,response)=>{
    response.send("Hello World")
})

app.listen(port, (req,res)=>{
    console.log(`Listening at port ${port}` )
 }) 
```
Restart the server and open localhost:3000 in the browser. You shall see a sophisticated and eye-catching web page as shown in the figure below:

---

![NodeJS for Beginners - Integrate Bootstrap 5 Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zov0t9ycu2wsvww3d9g3.png)
 
---

Once this design is integrated, we can move forward and add Docker support.

---

## ✨ Integrate Docker

Docker is a service that uses OS-level virtualization to package software into an isolated environment called containers. In other words, Docker is a containerization platform, that combines application source code with OS libraries and dependencies and packages it into a single unit that can be run in any environment.

> Running the project with Docker
 
The prerequisite for running the application with Docker is that first, you need to install Docker Desktop on your PC.

Head to https://www.docker.com/products/docker-desktop/, and install Docker according to your PC environment.  Once installed, verify the installation by typing the following command into your terminal:

```
 $ docker -v
```

If the above command runs without errors, that means the Docker was installed successfully and we can use it to start the NodeJS sample via a single command:

```
 $ docker-compose up --build
```

The main advantage of using Docker is the isolated environment execution for the project and also the fact that we've executed a single command. Of course, under a Docker set up we can execute more commands and complex deployment scripts but this is not the case for our super simple project.

---

## ✨ Popular NodeJS Extensions

Our NodeJS project is fairly simple but once the projects are getting bigger and more features are required to be implemented, we might need more modules and libraries that make our life easier during the coding phase. Well, this section mentions a few popular NodeJS libraries widely used in (almost) every NodeJS project.

> 👉 [multer](https://www.npmjs.com/package/mysql)

Multer is a `NodeJS` Middleware for handling multipart/form-data, which is primarily used for uploading files.

> 👉 [mysql](https://www.npmjs.com/package/dotenv)

The official NodeJS driver for MySql. It is written in JavaScript, does not require compiling, and is 100% MIT licensed.

> 👉 [dotenv](https://www.npmjs.com/package/dotenv)

`dotenv` is a zero-dependency module that loads environment variables from a `.env` file into `process.env`.

> 👉 [mongoose](https://www.npmjs.com/package/mongoose)

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

> 👉 [nodemon](https://www.npmjs.com/package/nodemon)

`nodemon` is a tool that helps develop NodeJS based applications by automatically restarting the node application when file changes in the directory are detected.

---

Those that patiently follow up on the content, can play with a few open-source Starters and Templates crafted on top of `NodeJS` and `Express`.

---

## ✨ [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard)

Berry is a creative React Dashboard built using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard with an easy and intuitive responsive design on retina screens or laptops.

- 👉 [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - product page
- 👉 [React Node JS Berry](https://react-node-js-berry-dashboard.appseed-srv1.com/) - LIVE Demo

The product comes with a simple JWT authentication flow: login/register/logout powered by an open-source Node JS API Backend via Passport Library.

---

![NodeJS for Beginners - Berry React (Open-Source NodeJS Sample)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q7plrftvww4yoilmqu4.png)

---

## ✨ [React NodeJS Datta Able](https://appseed.us/product/react-node-js-datta-able)

Datta Able is a colorful free React Admin Dashboard crafted by CodedThemes. It comes with high feature-rich pages and components with fully developer-centric code.

- 👉 [React Node JS Datta Able](https://appseed.us/product/react-node-js-datta-able) - product page
- 👉 [React Node JS Datta Able](https://react-node-js-datta-able.appseed-srv1.com/) - LIVE Demo

The product comes with a simple JWT authentication flow: login/register/logout powered by an open-source Node JS API Backend via Passport Library.

---

![NodeJS for Beginners - Datta Able React (Open-Source NodeJS Sample)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjd9y64lxzolic370vp2.png)

---  
 
## ✨ [React NodeJS Purity](https://appseed.us/product/node-js-react-purity-dashboard)

A colorful free React Admin Dashboard crafted by Creative-Tim on top of Chakra UI. Designed for those who like modern UI elements and beautiful websites.

- 👉 [React Purity Dashboard](https://appseed.us/product/node-js-react-purity-dashboard) - product page
- 👉 [React Purity Dashboard](https://node-js-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE Demo

Made of hundred of elements, designed blocks, and fully coded pages, Purity UI Dashboard is ready to help you create stunning websites and web apps.

---

![NodeJS for Beginners - Purity React (Open-Source NodeJS Sample)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47z8u3ir62y5co0z71l3.png)

---

> **Thanks for reading!** For more resources, feel free to access:

- ✨ The [Sample Project](https://github.com/app-generator/blog-sample-nodejs-introduction) can be downloaded from Github
- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products