Node Web Server

Creating a Web Server with NodeJS

The last couple of days have been exciting. I have deep dived into the fundamentals of NodeJS and so far have learned some interesting stuff. The good part is that I am not feeling lost anymore and that’s a really great feeling.

NodeJS is all about callbacks. It is quite important to understand the EventEmitter class in NodeJS as I feel this is the basis of most operations within NodeJS. I can even inherit from EventEmitter and create my own class object that can emit specific events. Definitely something that I can probably use in some future projects.

There are a lot of in-built modules available within NodeJS that help you cater to specific needs. In this post I will be using my fresh understanding of Node to create a custom web server without using any additional NPM packages.

Let’s try and create a simple html page which has an image and a form. Then we will serve this page with a web server and handle POST requests when someone fills up the form and clicks submit.

Here is a rather simple but bad looking HTML page. I have saved it as “test.html”.

Now, let me fire up a web server through Node. It is as simple as follows:

If I open up a browser and go to “http://localhost:8000” I should see my “Hello There” text displayed. It won’t matter if I add any more parameters to the URL. So “http://localhost:8000/xyz” or “http://localhost:8000/abc/mno/123” will also display the “Hello There” message. This is because the callback I created above will handle all requests made on port 8000. If I want to do something specific based on the URL or method (GET/POST) I will need to handle it within my callback.

Let’s modify our callback above to handle the requests accordingly.

If I go and check the page in the browser, it looks weird.

NodeJS Web Server

 

The image did not load because the browser is trying to fetch /node.png which is not being served by my web server code above. So I need to modify my callback function to check a request for this image and then return/stream it accordingly. Let me go ahead and try to make those changes.

With the above modifications our image request will also be handled by the server.

Serving images with NodeJS server

Great, seems to be working great. Now let me also try and handle the POST request made to “/saveForm” from the test.html page.

I have learned that the POST data is received by my Node web server as a data stream. So I will be receiving data in chunks. I need to implement a callback that handles the “data” event to receive the data chunk by chunk. I can concatenate this together and get back the entire POST data.

Now if I go ahead and submit the form by filling up some data, I should be able to see it back in my browser as a string value. Let me try that.

Creating a form in NodeJS

If I click on “Register Now” I should see the POST data back in the browser.

Handling POST data - NodeJS

Fantastic! I was able to create a web server in NodeJS without using any external NPM packages. I have now learned how to serve forms, images and also learned how to read data submitted through a form and reading it through streams. While the code above might look like a lot of overhead, it has given me some perspective into how streams and files need to be handled in a web request. This will help me a great deal when I deep dive into more complex topics.

 

Leave a Reply