Simple Chat App using NodeJS and MongoDB Atlas Part 1

Introduction

This is part one of a tutorial explaining how to create, from scratch, a simple chat app using NodeJS and MongoDB Atlas as its database. Chat apps are valuable for many applications, from interacting on social media to providing customer service.

NodeJS is a powerful open source program for web app development. As it is somewhat different from other programs, is does have a bit of a learning curve. However, once a basic understanding is obtained, NodeJS is a powerful tool for web developers to have at their disposal.

Prerequisites

Requirements for building a chat app using NodeJS and MongoDB Atlas:

• NodeJS must be properly installed and configured.
• MongoDB Atlas database must be properly created and configured.

• Possess a basic knowledge of NodeJS

• Have a VSCODE or VSCODIUM text editor. The editor can be download here.

• Nodemon must be installed globally; this is accomplished with the following command: npm install -g nodemon

How to Serve Static Content using ExpressJS

This section will explain how to create and serve a static file with a web API.

First, a project folder must be created to host the files.

Because the app is being developed locally, files can be hosted anywhere on the operating system. In this case, files will be hosted within the “Documents” folder via the following directory: “C:UsersteamsoloDocumentsnodechatApp”.

Create a server file within the project directory and name it ‘server.js’. After creating the package.json file, a new file must be created to store the dependencies, such as Express.js.

Note that Express.js will be used to handle client requests, routing and serving views to the client via a browser. Execute this by opening a terminal and navigating to the project directory and then executing the following code:

The above code will create a default package.json file with the following details:

After the package.json file is created, install the Express.js in the same manner using the following command:

Notice the ‘-s’ flag in the above code was used to save it to the package.json file. Check the package.json file again to verify it was saved successfully. The results should resemble the following:

Coding a basic Node server

With express.js installed, code the server and confirm it’s running properly. Do this by opening the server.js file and executing the following code:

The above code will call the express.js using the require() method and will then assign that instance to variable ‘app’. This allows for calling the listen() method and passing a number to set the port to instruct the server where to listen.

Now test the application by executing the following code in a terminal:

The results should resemble the following:

Verify the server is accepting a connection on port ‘:2500’ using this URL in a browser: localhost:2500.

The results should resemble the following:

Note that the image shows the developer tools displayed a 404 status. This is because nothing has been served yet; a connection was opened just to confirm the server is working properly.

Serving a static file

With the connection to the server verified in the previous section, now serve a static, or HTML, file using the express method app.use().

Open the server.js file, add the app.use() code and then save it. Nodemon will react to the changes and present the following error:

This error occurs because nothing has yet been defined that can be used by the app.use() method.

Now create an HTML file and name it index.html. While any random string can be used inside the file, for this example type “Hello from Express.js” and then save the file.

Now app.use can be instructed to serve a static file within the project directory. Update the server.js file with the following code:

Now save that and then refresh the page of the browser to verify the server successfully recalls the index.html file, as shown here:

Examine the page using the developer tool, under the “Network” tab. It should show the browser returns a status 200. This is acceptable. The results should resemble the following screenshot:

With the server successfully configured to serve static files, adjust the code and set a callback to the app.listen to make the code efficient for the application.

Execute the following code to update the server.js file:

The above code will create a callback () that takes no parameter and performs a console log to confirm the server is running. In order to make a reference to the port dynamically, set the app.listen() method to a variable named server and reference the port using theserver.address(port) code. This ensures the right port is always referenced whenever it is updated.

Save the change and then examine the details within the console. The results should resemble the following:

Conclusion

This was part one of a tutorial explaining how to create a simple chat app using NodeJS and MongoDB Atlas. The article covered the prerequisites needed for building a chat app using NodeJS and MongoDB Atlas. It specifically covered how to serve static content using ExpressJS and how to create and serve a static file with a web API. The tutorial also provided examples on how to code a basic node server and how to serve a static file. Remember that you must have a basic knowledge of NodeJS in order to be able to properly execute the functions set fourth in this tutorial.