Javatpoint Logo
Javatpoint Logo

Adding the Express Framework in MEAN Stack

In our previous section, we added the node backend in our application. As it was discussed that writing all the code just with nodejs is very cumbersome or difficult, and for this, we need an express framework. In this section, we will add the express framework for nodejs to make nodejs development easier. These are the following steps used to add express framework:

1) We will install express with npm by running the following command.

Adding the Express Framework in MEAN Stack

2) We will now add the express app and all the files that belong to it in the back-end folder. In the backend folder, we will create an app.js file.

Adding the Express Framework in MEAN Stack

3) This app.js file will hold the express app, which is still a nodejs server-side app, to take advantage of these express features. We will import the express in the same way as we have imported the http package in the server.js file.

Adding the Express Framework in MEAN Stack

The express is not package shipping with node, but the package we just installed with npm.

4) Now, we will use the express and one way of using it to quickly add one such route that handles a request for a single path only. We will do this by creating an express app. We will create a constant app because we won't change it and then execute that express package. We will execute express as a function, and it will return us an express app.

Adding the Express Framework in MEAN Stack

Now, we can use this app. An express app is just a big chain of middlewares, which we apply to the incoming requests.

5) So, we will add a middleware with the app and then use the use keyword in the following way:

The use function uses a new middleware on our app and on the incoming request.

Adding the Express Framework in MEAN Stack

6) The middleware function takes a function that is executed for an incoming request, and that function takes three arguments, i.e., request, response, and next function. The request and response arguments are the same as nodejs, and the next function is used for one special purpose. If we execute this function, then the request will actually continue its journey like this:

In the above code, the first middleware is useless. In this middleware, the next function plays an important role because it calls the next middleware, and in the next middleware, we will use the send function of response to send back the response.

7) We will then wire up this very simple express app with our server, where we are listening to our incoming requests. We will use the app as a listener, so we need to export this app. Here, we will not use the export keyword to export the app. We will have a module object with an exports object, and we register what we want to export in this exports object as a value like this:

Adding the Express Framework in MEAN Stack

8) Now, we will import it in our server.js file. We will add a new constant app and pass our app's path in the required function like this:

Adding the Express Framework in MEAN Stack

9) Now, we will use that app as a listener for incoming requests. We will pass the app to our createServer function.

Adding the Express Framework in MEAN Stack

10) One other thing is important before passing app to our createServer function, we need to tell express on which port we are working. For this, we need to set the port key using the set function in the following way:

Adding the Express Framework in MEAN Stack

Now, if we restart our node server, our browser and console will look like:

Adding the Express Framework in MEAN Stack

In the next section, we will improve our server.js file by simply adding error handling methods in it.

Adding the Express Framework in MEAN Stack




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA