Forem: Bashar

#5 Pure NodeJs: Routing (Part 5)

Bashar — Mon, 12 Feb 2024 04:40:31 +0000

In the previous tutorials i showed you how to return html ,Json, and plain text as response to nodejs server but all that was on the root route of the application to localhost:2121 in this tutorial we will handle multi routes to serve different type of data in different routes.

programs and versions:
nodejs: v18.19.0
npm: v10.2.3
vscode: v1.85.2

should work on any nodejs > 14

Lets Start:

first we will use the previous server code:

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello World!</h1>');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

first we will move the createServer callback function like this:

//server.js
const listener = (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello World!</h1>');
};

const server = http.createServer(listener);

now we will create routes object:

//server.js
const getHeaders = (type) => ({
  'Content-Type': type,
});

const routes = {
  '/text': (req, res) => {
    res.writeHead(200, getHeaders('text/plain'));
    res.end('hello world!');
  },
  '/json': (req, res) => {
    res.writeHead(200, getHeaders('application/json'));
    res.end(JSON.stringify({ res: 'hello world' }));
  },
};

notice that we create function getHeaders that take content type as parameter and return the header object because we will use it in all routes handler functions.

as you can see we created two routes /json and /text that will return the plain text and json data. now i will add html file and error page to be redirected to if the route not found.

//server.js
const htmlHandler = (req, res) => {
  fs.readFile('index.html', function (err, data) {
    res.writeHead(200, getHeaders('text/html'));
    res.end(data);
  });
};
const errorHandler = (req, res) => {
  res.writeHead(404, getHeaders('application/json'));
  res.end(JSON.stringify({ res: 'Not Found' }));
};
const routes = {
...
 '/html': htmlHandler,
 '/': htmlHandler,
 '/error': errorHandler,
....
}

as you can see we created two handlers for the html and the error because we can reuse it in different routes as we use the html in the root "/" route and in the "/html' route

now to use this routes we need to modifies the listener function:

//server.js
const listener = (req, res) => {
  const route = req.url.split('?')[0].split('/')[1];

  const handler = routes[`/${route}`] || routes['/error'];

  handler(req, res);
};

We can access the request URL from the 'req' object. I split the URL at the '?' to obtain the URL without any query parameters. For example, '/html?foo=bar' will now return only '/html.' I then use another split operation to extract just the first route. Consequently, if the URL is '/html/1,' it will only return 'html' in the handler constant. In the handler constant, I'm attempting to retrieve the route handler from the 'routes' object. I would like to highlight that I added a '/' before the '${route}' to align with the 'routes' object. if the route is in the object it will route that route handler function if not it will return the error handler

you can run and test the server:

//server.js is the file we work on it 
node server.js

now you can open localhost:2121 and test the routes:
html
text
json

the complete code:

const http = require('http');
const fs = require('fs');

const getHeaders = (type) => ({
  'Content-Type': type,
});
const htmlHandler = (req, res) => {
  fs.readFile('index.html', function (err, data) {
    res.writeHead(200, getHeaders('text/html'));
    res.end(data);
  });
};
const errorHandler = (req, res) => {
  res.writeHead(404, getHeaders('application/json'));
  res.end(JSON.stringify({ res: 'Not Found' }));
};

const routes = {
  '/text': (req, res) => {
    res.writeHead(200, getHeaders('text/plain'));
    res.end('hello world!');
  },
  '/json': (req, res) => {
    res.writeHead(200, getHeaders('application/json'));
    res.end(JSON.stringify({ res: 'hello world' }));
  },
  '/html': htmlHandler,
  '/': htmlHandler,
  '/error': errorHandler,
};
const listener = (req, res) => {
  const route = req.url.split('?')?.[0].split('/')?.[1];

  const handler = routes?.[`/${route}`] || routes['/error'];

  handler(req, res);
};

const server = http.createServer(listener);

const PORT = 2121;
const HOST = 'localhost';
server.listen(PORT, HOST, () => {
  console.log(`server run on port http://${HOST}:${PORT}`);
});

side note: in the html route i used html file like we did in the Previous article #3 Pure NodeJs: return html file (Part 3) so you should create html file in the same directory as the server.js file.

Conclusion:

In this article, we demonstrate how to manage various routes. In the upcoming article, we will also address the process of serving images.

#4 Pure NodeJs: return JSON (Part 4)

Bashar — Wed, 07 Feb 2024 21:30:33 +0000

In this tutorial we will continue the Pure NodeJs Series by showing how to serve json data.

programs and versions:
nodejs: v18.19.0
npm: v10.2.3
vscode: v1.85.2

should work on any nodejs > 14

we will use code similer to the code in the previews article #2 Pure NodeJs: simple server (Part 2).

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello World!</h1>');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

this code will return html to the browser page if we want to return json/object data we can use mock data like this:

const data = [
  {
    country: "United States",
    city: "New York",
    timezone: "America/New_York",
    currency: "USD"
  },
  {
    country: "United Kingdom",
    city: "London",
    timezone: "Europe/London",
    currency: "GBP"
  },
  {
    country: "France",
    city: "Paris",
    timezone: "Europe/Paris",
    currency: "EUR"
  },
  {
    country: "Japan",
    city: "Tokyo",
    timezone: "Asia/Tokyo",
    currency: "JPY"
  },
  {
    country: "Australia",
    city: "Sydney",
    timezone: "Australia/Sydney",
    currency: "AUD"
  }
]

to return this data we need to change the 'Content-Type'to be 'application/json' like this code.

  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify(data));

Notice that we've utilized JSON.stringify to encapsulate the data. This step is crucial because our intention is to return the data as a string. Additionally, we include 'Content-Type': 'application/json' to specify that the response for the request will be in JSON format, not as a string document.

the complete code:

//server.js
const http = require('http');
const data = [
  {
    country: 'United States',
    city: 'New York',
    timezone: 'America/New_York',
    currency: 'USD',
  },
  {
    country: 'United Kingdom',
    city: 'London',
    timezone: 'Europe/London',
    currency: 'GBP',
  },
  {
    country: 'France',
    city: 'Paris',
    timezone: 'Europe/Paris',
    currency: 'EUR',
  },
  {
    country: 'Japan',
    city: 'Tokyo',
    timezone: 'Asia/Tokyo',
    currency: 'JPY',
  },
  {
    country: 'Australia',
    city: 'Sydney',
    timezone: 'Australia/Sydney',
    currency: 'AUD',
  },
];
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify(data));
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

To start the server and open the browser localhost:2121.

node server.js

Conclusion:

In this article we show you how to serve data as JSON format
note you can save the data in data.json file and serve the Json data from the file like we did in previews article #3 Pure NodeJs: return html file (Part 3).

In the upcoming article I'll guide you through the process of serving different data types in different routes

#3 Pure NodeJs: return html file (Part 3)

Bashar — Mon, 05 Feb 2024 20:05:21 +0000

In this tutorial we will continue the previews article to learn how to serve an html file as response.

programs and versions:
nodejs: v18.19.0
npm: v10.2.3
vscode: v1.85.2

should work on any nodejs > 14

Lets Start:

the code that we used before to serve html string was this:

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello World!</h1>');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

we need to use require "fs" core module stands for "File System" so we can get the html file. but first we need to create index.html file in the same folder that we created server.js in it. the html file content will be:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
          initial-scale=1.0" />
    <title>Pure NodeJS</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

some basic html and add style to center the h1 in the screen and give it blue color.

for the server.js we will require the "fs" module like this:

const fs = require('fs/promises');

because i love the Promises async/await in the NodeJS es6 and the code will be easier to read i will use the 'fs/promises'.

so now to get and show our index.html file we can do it like this:

const server = http.createServer(async (req, res) => {
  try {
    const htmlContent = await fs.readFile('./index.html');
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(htmlContent);
  } catch (error) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`<h1 style="color:red;">${error.message}</h1>`);
  }
});

notice that we added the "async" before the (req,res)=>{...}; and i use "try catch" so if there any problem in the code we can send the error message as html red color.

now you can run the server with this code:

node server.js

open the browser localhost:2121 and you will find the hello world in the center blue color.

if you want to test if the error happened we can change the html file name to be like "notfoundfile.html" so this file is not found by the "fs" module and will return error:

ENOENT: no such file or directory, open './notfoundfile.html'

note: you need to stop the server with CTRL + c and re start it again.

the complete code:

const http = require('http');
const fs = require('fs/promises');

const server = http.createServer(async (req, res) => {
  try {
    const htmlContent = await fs.readFile('./index.html');
    res.writeHead(200, { 'Content-Type': 'text/html' });

    res.end(htmlContent);
  } catch (error) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`<h1 style="color:red;">${error.message}</h1>`);
  }
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

Conclusion:

In this article we show you how to return html file as response using simple pure NodeJs server.

in the next article i will show you how to return Json data as response

#2 Pure NodeJs: simple server (Part 2)

Bashar — Sun, 04 Feb 2024 16:50:46 +0000

In this tutorial we will continue the previews article to learn how to create simple Node Js server and show you different between serving plain text and html as response with no packages at all just pure Node Js core modules.

programs and versions:
nodejs: v18.19.0
npm: v10.2.3
vscode: v1.85.2

should work on any nodejs > 14

Lets Start:

I assume that you had read the simple server (Part 1) article if not this the code we used:

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('Hello World!');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

we will add this code before the res.end(..):

res.writeHead(200, { 'Content-Type': 'text/plain' });

the "res.writeHead" It is used to write the response header to the request. It takes two arguments: the HTTP status code (like: 200 success, 204 no content, 404 not found etc..) and an object containing the response headers.
so in this example we set the 'Content-Type' to be 'text/plain' but the default is 'text/html'.
the different between the 'text/plain' and the 'text/html' 'Content-Type' that the 'text/plain' will be wrap it with "pre" html tag so even if we write it like this:

res.end('<h1>Hello World!</h1>');

and run the server by this command (the file name is server.js):

node server.js

open the browser you will find the page show the text as it

<h1>Hello World!</h1>

but if we don't write the header or if we write it as:

res.writeHead(200, { 'Content-Type': 'text/html' });

there result in browser will be big bold "Hello World!" as should it be with "h1" html tag

Most common Content-Type:

text/plain: Plain text
text/html: HTML documents
text/css: Cascading Style Sheets (CSS)
application/json: JSON data
application/javascript: JavaScript code
application/xml: XML data
image/jpeg: JPEG images
image/png: PNG images
image/gif: GIF images
audio/mpeg: MP3 or other MPEG audio files
video/mp4: MP4 video files
application/pdf: PDF documents

the complete code:

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello World!</h1>');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

Conclusion:

In this article we show you the different 'text/plain' and 'text/html' and list most used Content-Type header value.

In the upcoming article I'll guide you through the process of serving HTML file as a response

#1 Pure NodeJs: simple server (Part 1)

Bashar — Sat, 03 Feb 2024 17:20:02 +0000

In this tutorial you will learn how to create simple Node Js server with no packages at all just pure Node Js core modules.

programs and versions:
nodejs: v18.19.0
npm: v10.2.3
vscode: v1.85.2

should work on any nodejs > 14

Now lets start:

I assume that you had node js installed on your device if not go to nodejs and download and install LTS version (20.11.0 On the date of writing this article)

create server.js:

first we need to create new file named server.js then copy this code:

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('Hello World!');
});

const PORT = 2121;
server.listen(PORT, 'localhost', () => {
  console.log(`server run on port ${PORT}`);
});

first line we required "http" core module to create our node js server by use it in this code:

http.createServer((req, res) => {
  res.end('Hello World!');
});

"http.createServer" to create the server
the callback function (req, res) => { ... } is called every time a request is made to the server.
The "req" parameter represents the request object, and "res" represents the response object.
"res.end" Ends the response by sending the specified string as the response body. In this case, it sends the string "Hello World!".

and to run the server we call "server.listen" with port 2121

now to run and test the server just write this code in terminal:

node server.js

if everything is right you should see in terminal;

server run on port 2121

and to test the server open the browser and go to localhost:2121 and you will see "Hello World!" in the browser.

simple right :)

Conclusion:

it's very easy and simple to create server with node js without any package but if you want to build big more complex application it will be better to use very common used packages like Express.js or Koa.js (this packages i use)

But I will continue to write a few articles on how to build nodejs server in the next articles i will show you how to serve an html and Json data as response.