How to serve a HTML page in Node.js



Previous article showed you how to create a basic server. Now lets look around the way to serve a html page using Node.js. First create a index.html file in your project folder.

<html>
<head>
  <title>Home Page</title>
</head>
<body>
  <h1>My first Template</h1>
  <p>Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</p>
</body>
</html>

Now lets see how to serve this page. Take a look at the code below.

var http=require('http');
var fs = require('fs');
var server = http.createServer(function(req,res){
  console.log('request made :'+req.url);
  res.writeHead(200,{'Content-Type': 'text/html'});
  var read=fs.createReadStream(__dirname + '/index.html','utf8');
  read.pipe(res);

});

server.listen(3000,'127.0.0.1');
console.log('Hey you are now listening to port 3000');

In the above code we have changed the content type into html to serve it as a html page. Without sending plain text to the browser we have created a html page and have sent it to the browser. Run the command line and then the browser to see the output. 

Comments

Post a Comment

Popular posts from this blog

How to Add Firebase to your Android Project

Image
From the previous article I gave you a brief introduction on Firebase. This article will help you to know how to add Fire base to your Android project.Lets get started . Go to your firebase dashboard for the android project that we created in the last article.You would get a similar interface as below. But this may be changes with time. On the dashboard there is an option to select Add firebase to your Android app.Select it and you will get similar window as given below. Here you will be asked the Android package name which is the package name of your added Android project. Add it there. com.example.user.myandroidapp is my package name and you can get it from MainActivity.java file. Next you will be asked to fill the  Debug signing certificate SHA-1   . This is optional but it is good to add it.  To add this go to your android studio and click the button Gradle in the top right.You will get a similar window given below.Click signingReport So...
Read more

Creating a Server in Node.js

Image
From the previous article we got to know how to read and write files in Node.js. This article will help you to get to know about Clients and servers in Node.js First lets look at  what client and server really means. When we browsing internet by using chrome or any other browser we request for some data. This is where the client send its request to get a response particular to the clients request. Then the server acts on the request of the client and send a response which we finally see as our search results. Basically considering the client ad server each computer can be uniquely identified by using their IP addresses.So when communicating they need to get connected through the IP addresses.So the information is shared using different protocols like http. This transferring data is called TCP where the data is transmitted through data packets from server to client.  Using Node.js, we can use the same functionality to communicate with computers. Creating a Basic S...
Read more

PHP CRUD Application using functions - Insert

Image
Hey Everyone. When developing a website using PHP, it is essential to develop it as a CRUD application.This article will show you how to insert form data into database using php with the help of functions. First we should create our front view and the database to continue further. Creating the front view We should create a project folder in our root folder.Since I am using Wamp server, I'll create it in the www folder. Next we should create a another folder called views to store the view files. Now I have created a php file called Home.php to create the front view. Now my folder structure will be like , Now to create the view I am using Bootstrap to make it interactive. Copy the CDN link from the  Bootstrap Guide  and paste it in between <head> tag. Now I will copy  Form Template  from the CSS in the Bootsrap site and paste it in between <body> tag. <form>   <div class="form-group"> ...
Read more