DEV Community

Cover image for Beginner's Guide to Node.js with Express
Shoieb Alam
Shoieb Alam

Posted on

Beginner's Guide to Node.js with Express

We'll look at the Express framework in this discussion. This framework is designed to operate as a basic and versatile Node.js web application framework, with a powerful set of capabilities for creating single and multipage web applications, as well as hybrid web applications.

Here you'll find out:

  • What is Express.js and how does it work?
  • Express installation and use
  • Introduction of routes?
  • Express.js Web server example

What is Express.js and how does it work?
Express.js is a Node.js web application server framework for constructing single-page, multi-page, and hybrid web applications.

For node.js, it has become the standard server framework. The MERN stack is made up of several components, one of which is Express.

The MERN is a free and open-source JavaScript software stack that includes the following components for creating dynamic web pages and online applications.

The Express.js framework makes it simple to create an application that can handle a variety of requests, including GET, PUT, POST, and DELETE.

Express installation and use
The Node Package Manager is used to install Express. This may be done by running the command line with the following line.

npm install express

The command above instructs the Node package management to fetch and install the appropriate express modules.

Let's make a simple "Hello World" application with our newly installed Express framework.

Our application will develop a simple server module that will listen on port 3000. Whenever a browser query is performed on this port number, the server application will respond with a 'Hello' World' message to the client.

Image description

Let understand the above code:
The need function is being used to include the "express module" in our first line of code.
We must first create an object of the express module before utilizing it.

We're going to make a callback function in this example. When someone visits http://localhost:3000, our web application's root, this method will be called. The string 'Hello World' will be sent to the web page via the callback method.

We send the string "Hello World" back to the client in the callback function. To transmit content back to the web page, use the 'res' argument. The 'request' module provides the 'res' argument, which allows you to transmit material back to the web page.

The listen to function is then used to make our server program listen for client requests on port 3000. You can use this field to specify any available port.

When you run your code in the browser, the following Output will appear if the command was successfully executed.

Output:

Image description

Based on the results,

If you go to the URL of localhost on port 3000, you'll notice that the string 'Hello World' is shown on the website.

Because we specified in our code that the server should listen on port 3000, we are able to see the output when visiting this URL.

Introduction of routes?
The manner an application replies to a client request to a certain endpoint is determined by routing.

For example, for various URLs, a client can make a GET, POST, PUT, or DELETE http request.

http://localhost:3000/products
http://localhost:3000/users

In the preceding example,

If you make a GET request for the first URL, you should get a list of books as a response.
If the second URL is requested using GET, the result should ideally be a list of Students.
So, depending on the URL that is accessed, the webserver will run a different function, and the response will be provided to the client appropriately. The concept of routing is as follows.

Express.js Web server example
We know that how routing can help us determine which outputs to show. The majority of current online apps employ this type of routing. The other aspect of a web server is the use of Node js templates.

For setting up the server navigate to the root directory from the terminal and run the following command:

$npm init -y

The package.json file will be generated automatically by the program. Then, to install Express, use the command below, which will save it as a dependency inside the package.json.

$npm install express --save

Image description

Let understand the above code:

Lines 1 and 2 are required for us to use Express inside our server.js file.

Line 3 – This instructs the Express server to run on a specific port.

Line 6 – displays a message on the console stating that the server is operating normally.

Lines 9 to 11 – This will create a GET route that will be retrieved later from our client-side React App.

Conclusion:

The express framework is the most widely used framework for Node.js application development. The express framework is a server-side framework built on top of the node.js framework that aids in the rapid building of server-side applications.

Routes are used to direct users to different portions of the web application depending on their request. Depending on what has to be shown to the user, the response for each route can be different

The Express backend can do a lot of things, like make database requests, but in this post, we'll focus on how to quickly connect to the backend Express server from a client-side React App.

Top comments (0)