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