In this article, you will learn how to build a web application with a web server and also understand how the web requests and responses work. We’ll use an important core module in this tutorial which is related to creating a web server. with the help of asynchronous code and a concept called the event loop to stay reactive.
How The WebWorks
Now, the web works like this, we get got a user, a client, you sitting in front of your browser, visiting a webpage or already being on a webpage and submitting a form. so you’re interacting with webpages.
For example, if you’re entering some URL into your browser and what happens behind. the scenes are actually that the browser reaches out to some domain name servers to look that domain up. Because, this domain is not the address of your server, it’s an encoded human-readable version of that address you could say, your server itself has an IP address. but, this is some technical thing behind the scenes, in the end, you enter this URL and it will lead to some server. You thus or the browser, thus, sends a request to that server.
you write the code that spins up that server which is able to handle the incoming request and do something with it. so, communicating with the database which runs on a separate database server. but, which you reach out to from your backend, so your server-side code and once you’re done with that, you do one important thing, you send back a response to the client.
This response can be some HTML text, some HTML code which is then handled by the client. but it could also be some other kind of data like a file, some JSON or XML data.
Now that request and response transmission is done through some protocol. so basically a standardized way of communicating, to correctly handle a request and send back a response the browser can work with. we have to follow some rules and these rules define by the protocol we use, HTTP or https.
Server communication using Http
Http stands for hypertext transfer protocol. it defines how a valid request looks like and how the data should transfer from browser to server. the other way around and https is the same with SSL encryption turned on where all the data that is transmitted is actually encrypted. so that if anyone is spoofing your connection, they can’t read your data.
Creating a Node.js web server
Let’s go to Visual Studio Code, then create an empty folder,
Now, we create a new file within the empty folder. but often you name it app.js. it is the root file that makes up your Node.js application, so the Node.js code you will execute on a computer in the cloud on a server in the end.
Now in this file, we want to create a server through Node.js.
But generally, most functionalities aren’t available by default. to not pollute our global namespace with all these reserved keywords and names. basically, it very obvious in each file on which functionalities this file depends and thus far.
Now there is a couple of core modules Node.js, you can also install third-party modules.
there are two topmost packages, Http and https. these two sound very helpful when it comes to creating a server and working with Http requests and Http responses.
The HTTP helps us with launching a server or also with other tasks like sending requests. because a node app could also send a request to another server, you can have many servers communicate with each other.
Https would be helpful when we want to launch an SSL encoded server, so where all that data which is transferred is encrypted.
there also is a path that helps us with constructing paths, on any operating system because Windows and Mac and Linux use different path formats.
There is the OS package which helps us with the operating system, relevant information and so on.
here, we create a new constant and you could create a const too that value will never change, we can also use a const to make this clear that we will never touch this again, you keep the name of the module you’re importing.
const http = require('http'); [const]
It has the create server method. this is a useful method when it comes to creating a server.
Actually if we hover over it we can see it, actually takes a so-called request listener as an argument. A request listener simply is a function that will execute for every incoming request.
We’ll create a new arrow function within the createServer function. then, We pass that function to create the server and thus, the node will execute this function whenever a request reaches our server. This is an event-driven architecture.
This creates a server method that actually returns a server. So we have to store that in a new constant and now we can use that server and do something with it.
As you can see we get a bunch of methods we can call and one method is to listen. Listen now actually starts a process where Node.js will not immediately exit our script. but where Node.js will instead keep this running to listen,
Now listen as you can see takes a couple of arguments, optional arguments,
the first one is the port on which you want to listen. Now in production, you would not fill this out and it would take the default of port 80.
But, here on local development, we want to use a different port and you can also define a hostname. so for our local machine, this is localhost by default.
So, let’s pass a port, 3000 is a port you often use but you’re free to use the port you want, the thousands port are pretty safe.
Now, you can see that inaction by opening a terminal and browser window where we enter localhost:3000.