How to Create a Simple Node JS Webserver serving HTML pages using EJS

-

 Creating a Web server with Node JS is fairly simple with Node JS which serves HTML view pages. For this purpose I am going to use Visual Studio to create Node JS Web Application type project. 

If you are not able to find the template project for Node JS then most likely the packages for Node JS development are not installed from Visual Studio Installer.

Installing Node JS Development Tools

From the Visual Studio Installer select the Node js development tools and install them to create a Node js project as shown in the figure below.

Node js Development tools

Once its installed we can go ahead and create a empty Node JS web application.

Required npm packages for this application would be 

  • http
  • express
  • ejs-locals
Server Application is the express App and since its a web application we need to use the http package to host the Application.

ejs-locals is a package stands for Embedded javascript Template pack using which we will be able to create html views using javascript.

Install the required packages using the npm package manager from the visual studio itself or using the command prompt.

Demo

Once the dependencies are installed you will see that these are added in the package.json file present in the Node JS application as shown below:

package.json

Next we have to add our server logic to our Web Application Startup file Server.js as shown below:

Server code for serving views


As shown in the server code above we are using the view engine as ejs. The default route path as specified by "/" returns a json with a label title from the relative path ejs/index. For this to work we have to create a index.ejs file in the path which uses ejs to embed the javascript code in the html. The folder structure is as shown in the figure below:

Folder Path for EJS

The content of the ejs file is shown below, which is a basic html template with placeholder for the title

EJS Page

In the server code when we assign the value for the title property, the view is generated with the correct value and is returned to the client as shown below:

Node js response

Here the response is a html which is generated by the ejs view engine.

The other variant is to directly send the JSON data without view as shown in the case where the route path is "/app/user".

Comments

Post a Comment

Popular posts from this blog

Creating RESTful Minimal WebAPI in .Net 6 in an Easy Manner! | FastEndpoints

-
Image
  We might have developed Web APIs using MVC Controllers where we used to give Route Path Attributes to the Controller and  to identify individual methods we used to provide Actions in the Route. With the Controller approach we need to write boiler plate code in separate files which deals with the Configuration of the Web Service. Those who have worked in Node js would be aware of how easy it is to create a Web API and expose different Endpoints without the need of so much boiler plate code. Here we are going to discuss of similar approach for creating a Web API in .Net6 using FastEndpoints. Under the hood it uses Minimal API concept which tries to reduce the dependencies required to achieve a particular task. This approach is more suitable in the case of Microservice Architecture where we want to keep the dependencies to minimum. Must Read : Fluent API and Data Annotations What are FastEndpoints? FastEndpoints is a Framework compatible with .Net 6 which allows to build a RESTful Web A
Read more

Mastering Concurrency with Latches and Barriers in C++20: A Practical Guide for Students

-
Image
Introduction Picture yourself as a student tasked with organizing a surprise party for a friend. You have a team of friends helping you, each with a specific role: one decorating, another cooking, and yet another taking care of entertainment. As you plan and coordinate, you quickly realize the importance of timing and synchronization. Just as in party planning, in the world of programming and computing, we often have multiple tasks running concurrently, similar to your friends handling different aspects of the party all at once. However, ensuring that these concurrent tasks harmonize can be a significant challenge. If decorations go up before the food is ready or the entertainment starts before guests arrive, it could lead to chaos. This is where the world of programming comes in, and in this blog, we'll explore powerful tools called "latches" and "barriers" to manage these concurrent scenarios efficiently. Learning about latches and barriers isn't just abou
Read more

Graph Visualization using MSAGL with Examples

-
Image
 Graph visualization is a great way to get a better understanding of complex relationships and structures in data. Whether you work as a software developer, a data scientist, or just want to explore networks, seeing graphs at runtime can be really helpful. In this blog, we'll look at how to make graphs at runtime with MSAGL. We'll cover the basics of creating, customizing, and visualizing graphs with MSAGL, as well as practical examples of how it can be used to create a social network and workflow. What is MSAGL? MSAGL, developed by Microsoft Research, is an open-source library designed for graph and diagram visualization. It offers a wide range of features and layout algorithms to create clear and aesthetically pleasing representations of complex graph structures. Installing MSAGL: To begin, you'll need to install the MSAGL library. You can download the latest version from the official MSAGL GitHub repository or conveniently install it using the NuGet package manager in Vi
Read more