Routing refers to how an application's endpoint/URL responds to what is requested by the client/browser. Or, routing can also be described as the mechanism of how an application responds to client/browser requests to specific endpoints/URLs with specific HTTP request methods like GET, POST, PUT, PATCH, DELETE, and others. For short information about HTTP request methods, you can read more here.
Example of Routing on a Website
The illustration above shows how client-server communication works. It also demonstrates how routing works. For example, suppose we have a website with 2 pages or what I often call "2 routes": "/home" and "/about". When we type "example.com/home" in our browser's URL bar, the process that runs is similar to the illustration above. If we break it down into points, the flow would be like this:
- User types "example.com/home" in the browser and presses enter
- Browser sends a request to the Web Server asking for the page "example.com/home"
- Web Server checks if the page "example.com/home" exists
- After finding it, the Web Server returns a response according to what has been defined and sends it back to the browser that made the request
- Browser receives the response from the server and displays the response in the browser
- For example, if the server's response is to display the text "Hello world", the browser will display "Hello world"
- For example, if we type the URL "example.com/asdwa" and the web server cannot find a match for the client's request, it will respond that what the client requested does not exist
For more detail, let's continue with our helloworld.js from the previous article
Here is the code from the previous article. Now we will learn how to create routing or how routing actually works without a framework/library. We will create routes for "/", "/about" and "/404" pages in case the request made by the browser is not found by the server or the application we created.
const http = require('http')
const port = 3000
const server = http.createServer((request, response) => {
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('Hello world!')
})
server.listen(port, () => {
console.log(`server started on port ${port}`)
console.log('press Ctrl-C to terminate....')
})
Let's try removing lines 5-6 and replace them with the following code.
console.log(request.url)
After that, let's run it in the browser and try changing the URL after "localhost:3000/" with anything. It will display a log like below.
We can see that all requests made by the browser are logged in the request parameter. If we look at the screenshot above, request.url displays the request path made by the browser in detail.
Now, how do we make it so that when the browser requests the "/" page, we send Home content; when "/about" is requested, we send About content; and if the browser makes a request that is not found, we redirect to "/404"? The answer is simple — we use conditionals.
Now let's add the following code below the console.log(req.url) syntax. The purpose is to clean up the URL or remove query strings from it.
const path = request.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()
After that, let's add the conditional using the path variable we defined earlier. If it's "/", we'll send a Home response. If it's "/about", we'll send an About response. And if the request is not available, we'll send a "/404" response. Let's add the following syntax after the path variable definition.
switch (path) {
case '':
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('Homepage')
break
case '/about':
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('About Page')
break
case '/404':
response.writeHead(404, { 'Content-Type': 'text/plain' })
response.end('Not Found')
break
default:
response.writeHead(301, {
'Content-Type': 'text/plain',
Location: '/404',
})
response.end('Redirect to 404')
}
After adding this code to the previous code, try running node helloworld.js and navigate to the "/" page. You should see the text "Homepage" in the browser. Then, when you change the browser's URL to "/about", you'll see "About Page". But when you try any URL that is not defined above, it will redirect to "/404" with the content "Not Found".
If we're building a fairly large application, it's not possible to use only NodeJS. Imagine if we had 100 routes — we'd need 100 × 4 lines just for simple responses. But it's also not practical to display only simple content; there's usually complex logic at each route.
That's why people created web frameworks to make it easier for us to build web applications using NodeJS. The most famous and widely used examples are ExpressJS, HapiJS, Koa, and others.
Below is the complete source code for simple routing using only NodeJS.
const http = require('http')
const port = 3000
const server = http.createServer((request, response) => {
const path = request.url.replace(/\/?(?:\?.*)?$/, '').toLowerCase()
switch (path) {
case '':
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('Homepage')
break
case '/about':
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('About Page')
break
case '/404':
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('Not Found')
break
default:
response.writeHead(301, {
'Content-Type': 'text/plain',
Location: '/404',
})
response.end()
}
})
server.listen(port, () => {
console.log(`server started on port ${port}`)
console.log('press Ctrl-C to terminate....')
})
Summary || TLDR;
Routing is the mechanism of how an application responds to client/browser requests to specific endpoints/URLs with specific HTTP request methods like GET, POST, PUT, PATCH, DELETE, and others.
We can also create routing using only NodeJS. Here we understand the basic concept of routing — we just need to examine each request sent from the client, then filter it. If we find a match, we send a response saying it was found. If not, we send a response saying the data requested by the client was not found.
This same concept is also used to create RESTful APIs in the future.
Credits
- Photo by Javier Allegue Barros on Unsplash
- Illustration - filipmolcik
Blog
Learning NodeJS: Creating Your Own Web Server with NodeJS
If you've ever created a static HTML website or used PHP or ASP before, you've likely worked with a web server like Apache or IIS that serves static files requested by the browser.
Learning NodeJS: How to Install NodeJS on Windows, MacOS, and Linux Ubuntu
If you want to build a modern web application, you'll likely need NodeJS. Here I will explain how to install NodeJS on Windows, MacOS, and Linux Ubuntu.