how to display html files from node js example tutorial

This is a continuation of the tutorial started on node js angular and mongo db shown on
node js console tutorial

Here We have see how to print a Hello World for a request of “/”. That is a good advancement but that won’t give us much to proceed. We need a way to server html files for different requests.

So, what we want to do is to have more flexibility by having html file. We will have all the contents as we wish using the old school html tag and we will serve that through node js.

Displaying and rendering html file through node js

If you have followed this then start from number 4

1. create a directory node-input

2. move to that directory and issue the following command to install express in it

sudo npm install express

3. The above command would install express package in node_modules folder. This is the folder where all third party packages would be stored.

4. create server.js file in the folder node-input.


 var express = require("express");
 
 //use the application off of express.
 var app = express();
 
 //define the route for "/"
 app.get("/", function (request, response){
     //show this file when the "/" is requested
     response.sendFile(__dirname+"/views/index.html");
 });
 
 //start the server
 app.listen(8080);
 
 console.log("Something awesome to happen at http://localhost:8080");

5. create a folder views in node-input folder

6. create index.html inside views and add the following code in it


 <html>
 <head><title>Simple hello world</title></head>
 <body>
 <h1>Hello Node JS</h1>
 </body>
 </html>

7. go to your browser and type http://localhost:8080

You will see Hello Node Js on the browser big and bold.

What is going on

It is like the previous example except we are serving the actual physical html file this time.

By doing so, we have more control on the html file like adding css and javascript codes or calling those files on the page.

Mind you, index.html is the entry point, once we got on that page, we can navigate to other pages and do more

**If the above app is not working for whatever reason, make sure to update npm and get newest version

npm i -g npm-check-updates
npm-check-updates -u
npm insert

Next: Accepting input from the user and processing it.