As a beginner full-stack developer, it can be hard to learn different programming languages for front-end and back-end development.
Even with experienced developers, learning different languages gets confusing as one will mix up the syntaxes from time to time. This is where NodeJS comes in.
NodeJS helps developers write client-side and server-side code using one programming language (JavaScript).
JavaScript originally ran on the browser but as it gained popularity, developers worked hard to make it better and better, and in the process, node was created.
Currently, Node is very popular and with a lot of features and tools to make development easier. One of those tools is the Express framework which provides us with a library of resources for web and mobile development.
This article will show you how to create a simple node.js server with Express.
Prerequisites.
Before we start creating the server, make sure you have all these in your system.
- Node JS - Check our tutorial on how to install node using NVM
- VS Code or any editor of your choice _ Get VS Code cheat sheet here
Setting up the Project
Before we can create the server, we start by creating the project folder in the location of your choosing. We do this using the mkdir command followed by the name of the folder.
mkdir ego_app
You can name your folder anything you want. With the directory created, everything we make will go into that folder so let's head to that directory with the cd command.
# In your terminal execute the command.
cd ego_app
Open the ego_app directory inside your editor of choice. For this demonstration, VS Code has been used. Use the command below.
code .
The command above should open up ego_app directory in VS Code as shown below.
Your terminal should look like this so far.
Setting Up Node development Environment
With the directories created and VS Code open, let's initialize a new Node.JS project with the command below.
npm init -y
This command should create a package.json file in the root directory of the project. The -y flag assumes the default options for all the prompts in the terminal. This is how your terminal should look like.
If you check your VS Code, you will notice the package.json file under the ego_app directory. This file will hold all the scripts and dependencies that our app will require.
Let's add some dependencies.
npm install express nodemon
The code above will install the express framework, nodemon, and their dependencies in the node_modules directory. Nodemon is a command-line tool to restart node applications automatically. Learn more about nodemon in the article below.
GeekBits
By installing the two dependencies, they are automatically added to the package.json file under the dependencies entry.
Configuring package.json file
Open the package.json file and find the 'main' entry. Usually is on line 5. We need to set the entry point of our application. Change its value to app.js as shown below.
Let us now create the app.js file which will hold our code. Do so with the following command.
touch app.js
Before we make changes to the app.js file, let's make one more change to the package.json file.
Under the "scripts" entry which is on line 6, we'll tell node how to start our project with the start script. Make the changes as seen below.
Make sure to include a comma , at the end of "test" script otherwise the editor will give you errors. The start script will allow us to start the application with the command npm start and once it is started, you won't need to restart it again anytime you make changes to your files because nodemon will be on standby waiting for changes to restart the application for you.
We can now move to the app.js file now and create the server.
Creating the Server with Express
Open the app.js file and add the following code.
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, () => console.log(`Server is running on port: ${port}`));
The first line of the code above imports the express module to give us all the functionalities that come with it.
One of those functionalities is creating an express app by invoking the express function which is what we have done on the second line.
This initializes the Express application and we assign it to the variable app. This app variable will then be used to define routes, middleware, and other functionalities of our server as we shall see when defining routes.
The third line sets the value of the port on which our server will be listening to for incoming requests. In this case, we use port 3000. The value can change to any other valid port number.
The last line of code sets up the server to listen on the port we specified above. If the server starts successfully, the message "Server is running on port 3000" will be printed on the console as specified by the callback function.
You can start the server to make sure that the server is working. Do so with the command below.
npm start
As you can see, our server is successfully running and listening on port 3000. You can stop reading here if that is what you came for or stay tuned to see how we set up the routes.
Defining the Routes
Now that the server is up and running, we will define different routes to handle the different HTTP requests. We can define routes as the different URLs that the clients can access on your server.
In this example, we will define the homepage (/) and the About page (/about). Add the following code on VS Code.
app.get('/', (req, res) => {
res.send('Hello, world!');
});
app.get('/about', (req, res) => {
res.send('About page');
});
The whole code should look like this.
We are using the app object which represents the express application to define routes. This app now has a variety of methods for defining routes based on the HTTP methods. In this example, we use the get method to handle the GET requests for the specific URLs.
Line 5 of the code above defines a route to the root URL '/'. When a call request is made to that route, the callback function is executed.
The callback function takes two parameters req and res. They represent the incoming request and the outgoing responses respectively.
So in this case, we are using the res.send method inside the callback function to send a response back to the client when a GET request is made to the root URL.
The client should see the string Hello, world! on the browser. Head over to the browser and paste the URL below on the search bar.
localhost:3000/
The same thing applies to the /about route where we use the res.send method to respond to the GET request made on the /about route. The callback function is executed and the client should see the string About page on the browser. Head to the browser and paste the URL below to the search bar.
localhost:3000/about
In general, these routes instruct our server on how to handle incoming GET requests for specific routes. These are just a few basic examples of what you can do with your server. You can define more routes with different types of requests such as GET, POST, PUT, DELETE and more.
Conclusion
As we have seen, NodeJS solves a major problem for most developers and especially beginners who now don't have to learn a different programming language for the client-side and the server-side.
NodeJS offers a lot of features that make development easy such as the Express library which enables us to easily create a server that handles complex routing scenarios in your application.
This article has shown you how to create a node.js server using the express library and it has also shown you how to handle different routes.
That is all for this one. If you found the article helpful, make sure you subscribe to Geekbits and share the article with interested parties.
Thanks for reading : )
