1. Installation

In this very first tutorial, we are going to give you a brief introduction of what we are going to create and do the installation of our project.

Introduction to Project

We are going to create a real-time chat application in Node JS, Mongo DB, and Vue JS. This will be a Single Page Application (SPA). The front-end will be developed in Vue JS and the backend will be developed in Node JS and Mongo DB. This will be a full-stack application, it is commonly referred to as MEVN (Mongo, Express, Vue, Node). Express is basically a framework of Node JS that is used for routing, middleware, and other purposes.

Technologies Used

Vue JS is a front-end framework that is used to design user interfaces for web applications. SPA is a Single Page Application which means that only the content of the page is loaded dynamically. The page is not actually refreshed, only the required part of the page is loaded dynamically using Javascript.

Node JS started as a runtime environment for Javascript, is now a platform used for the backend of web applications. As it is in Javascript, so you do not need to learn a lot of languages like PHP to develop the backend.

Mongo DB is a No-SQL database program which means that it is the opposite of a traditional SQL approach. It is also known as a schema-less database because, like SQL, Mongo DB does not require a specific schema to be designed. Mongo has documents, just like SQL has rows. But unlike SQL, each Mongo document can have a different schema.

Installation

The installation process is very simple. First, you need to download Node JS and Mongo DB. You can download the latest version of Node JS from their official site: https://nodejs.org/en/

And you can download the Mongo DB from their official website too: https://www.mongodb.com/

To view the data in Mongo DB, we will be using a software called “Mongo DB Compass”. You can download the Compass from here: https://www.mongodb.com/try/download/compass

Video Tutorial

Folder Structure

So now you have installed all the tools you have required to run the project, and create a new folder anywhere on your computer. For the sake of this tutorial, we are going to create a folder named “chat-station-mevn” on our Desktop. Inside this folder, create 2 more folders:

  • web
  • api

The web folder will have all the frontend source code which will be in Vue JS. And “api” folder will contain all the backend code (Node JS & Mongo DB). We will be calling AJAX requests from our Vue JS app to read and write data.

In api folder, create a file named “server.js”, you can leave this file empty, we will add code to it later.

So let’s go ahead and open the terminal or command prompt (CMD) in both folders. You should open 2 different CMD windows, 1 in the web folder and 1 in api folder. First, we will set up our backend.

In your api folder CMD, run the following commands:

> npm init

This will ask several questions like author name, project version, etc. You can either write the answers properly or you can simply press enter key to set the default values to all these answers. After that, you need to create a file named “server.js” at the root of your api folder.

npm init
npm init

Then run the following commands one by one:

// install express framework, http module, and mongo db as database
> npm install express http mongodb

// nodemon will restart the server if there is any change in server file
> npm install -g nodemon

// starts the server
> nodemon server.js
npm installation express http mongodb
npm install express HTTP MongoDB

Explanation

The first command will install the express and HTTP modules. We will be using Express for routing and middleware. And we will be using HTTP for standard HTTP requests, as we will be developing an API for our chat application. Mongo DB module will be used to connect, read and write data to the Mongo database.

The second command will install a module named “no-demon”. Normally, if you make any changes in your server.js file, you need to manually restart the Node JS server for the changes to take effect. Using no-demon, you do not have to restart the server manually. As soon as there is any change in the server file, it will automatically restart the server.

nodemon server.js
nodemon server.js

The third command will start the server and start listening for any changes in the server file. If you do not want it to listen for server file changes and you want to restart the server manually, you can use the following command instead of the third:

// if you start the server using this command, and made any changes in code, you have to re-run this command again for changes to take effect
> node server.js

At this point, your api folder should look like this:

api
api

And you can access your API from this URL: http://localhost:3000

Start the Server

To start the server, simply open your “server.js” file and write the following code in it:

server.js

// include express framework
const express = require("express")

// create an instance of it
const app = express()

// create http server from express instance
const http = require("http").createServer(app)

// database module
const mongodb = require("mongodb")

// client used to connect with database
const MongoClient = mongodb.MongoClient

// each Mongo document's unique ID
const ObjectId = mongodb.ObjectId

const port = (process.env.PORT || 3000)

// start the server at port 3000 (for local) or for hosting server port
http.listen(port, function () {
    console.log("Server has been started at: " + port)

    // connect with database
    MongoClient.connect("mongodb://localhost:27017", function (error, client) {
        if (error) {
            console.error(error)
            return
        }

        // database name
        db = client.db("mevn_chat_app")
        global.db = db
        console.log("Database connected")
    })

})
server started
server started

You will see 2 messages that the server has been started and the database has been connected in your CMD opened in api folder. Your database will be displayed when there is at-least one collection in it. A collection can only be created when at least 1 document is added to it. We will get on that later.

In the next tutorial, we are going to set up our Vue JS single-page application.

Conclusion

In this chapter, we did the installation by learning to download and install Node JS and Mongo DB in our local system. Then we created a folder and 2 sub-folders in it, one for the backend and one for the frontend. Then in our backend folder, we started our Node JS server and connected with Mongo DB.

If you have any problems during installation, feel free to contact us.