How do i render a node js html page?
When developing web applications, you might need to render the HTML components inside your server. This will help create interactive pages on the client side once a request to access these pages is made. Show There are various ways of hosting your HTML pages (website), for example:
This guide explains how to render HTML elements and HTML pages on your server using Node.js. PrerequisitesBasic knowledge of using Node.js and Express.js will be helpful to follow along. What we will cover
Setting up
Check this guide to learn more about using NPM.
Rendering inline HTML elements as HTTP responsesBelow is a simple hello world HTTP server ( File name: app.js
Whenever the server is running, and accessing the route We can use the same server to render HTML elements as the server response instead of sending plain text. Here is a list of some HTML elements. We can render them directly into our server by specifying the response to send when the default route is accessed.
Restart the server and open the route
Render HTML web pages as server responsesThe method above can be very tiresome and may
not be the type of code you want to write inside your server. In a normal web page, HTML elements are written in a This makes it easier to write all your HTML elements, including CSS styling, to layout these elements. Thus separating the server files and the HTML elements, creating a clean code setup. To render an HTML file into the server using Express.js, we use This transfers the file to the browser upon a GET request to the server. The server submits a response status with HTML rendered web content as the message body. Here is the
The path specifies the location of the HTML file. It takes an array of the file name such as When the server is online, you might have no idea of your HTML file location. Let’s demonstrate how
Open the route As you can see, it prints the exact path to reach your server location. Now we can send HTML files to the server using To start, create an HTML form ( File name: index.html
File name: app.css
Let’s render the file into the server.
However, this did not load the CSS styling.
Save the file and open Parsing form data to the server using the HTML formsThe server is running. It is now returning HTML form as a response to the client (browser). Whenever this server’s route is accessed, the Let’s try that out. This outputs the results below, an error returned by the server. Reload the page again. Open the browser inspector tool and head to the Network tab. Fill in the form data and click the subscribe button. This will return a 404 status code. This means the client cannot send/ The HTML form we have created has a Our server does not have a way of processing any We
can fix this by adding a
When you click the subscribe button, a Everything is working great. Nevertheless, we need the server to get the form data and send the relevant results to the browser instead of sending some relative plain text such as To interact with the form data, we need a body-parser package. Go ahead and install
this package using Import the package using the Body-parser has a few modes such as:
In this example, we will use the Body-parser goes into any of your routes using With the body-parser, we can access this form data and interact with it. Let try to console log
Open This form data is readily available, and we can now instruct the server what to do with it.
Fill in the form inputs and click the subscribe button.
ConclusionI hope this guide helped you understand how to render HTML data into your server using Express.js. Template engines such as pug and ejs can also be used to render dynamic HTML data into the server. They both compile down HTML using backed technologies such as Express.js. Happy coding. Peer Review Contributions by: Lalithnarayan C |