Nodejs Creating An Http Server Complete Guide

Step 1: Setting Up Your Development Environment

Before you start coding, ensure you have Node.js installed on your system. You can download it from nodejs.org.

Check Installation:

Open your terminal or command prompt and run:

node -v
npm -v

You should see version numbers for both node (the JavaScript runtime) and npm (Node package manager).

Step 2: Creating a New Project Directory

Create a folder where your project files will reside.

mkdir my-node-server
cd my-node-server

Step 3: Initialize Your Project with npm

Inside your project folder, initialize a new Node.js project using npm. This will create a package.json file that keeps track of your project dependencies and other metadata.

npm init -y

The -y flag automatically fills the prompts with default values, creating a package.json file quickly.

Step 4: Write Your First HTTP Server

In your project directory, create a new file named server.js. Open it with your preferred text editor and add the following code:

// server.js

const http = require('http');

// Define the hostname and port number
const hostname = '127.0.0.1'; // localhost
const port = 3000;            // Common port for development

// Create the server instance
const server = http.createServer((req, res) => {
  // Set the response header to tell the browser what type of content we're sending
  res.statusCode = 200;                  // OK status
  res.setHeader('Content-Type', 'text/plain'); // Type of content

  // Send the response body
  res.end('Hello, World!\n');
});

// Start the server and make it listen on the specified port and hostname
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Explanation of the Code:

1. Importing the http Module:

   const http = require('http');
   

   The http module provides functionality to create and manage HTTP servers.

2. Setting Constants:

   const hostname = '127.0.0.1'; // localhost
   const port = 3000;            // Port number for our server
   

   • hostname: Specifies the IP address on which our server will listen.
     • '127.0.0.1' refers to the loopback interface, meaning our server will be accessible only from our local machine.
   • port: The port number through which clients (like web browsers) will communicate with our server.
     • Port 3000 is commonly used for development purposes but you can choose any open port.

3. Creating the Server:

   const server = http.createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-Type', 'text/plain');
     res.end('Hello, World!\n');
   });
   

   • http.createServer(): This method creates a new HTTP server instance.
   • Callback Function (req, res): This function is executed every time a request is received by the server.
     • req: Represents the incoming request.
     • res: Represents the outgoing response.
   • Response Setup:
     • res.statusCode = 200: Sets the HTTP status code to 200, indicating that the request was successful.
     • res.setHeader('Content-Type', 'text/plain'): Tells the client that the content being sent is plain text.
     • res.end('Hello, World!\n'): Sends the final response back to the client, including the text "Hello, World!" followed by a newline character.

4. Starting the Server:

   server.listen(port, hostname, () => {
     console.log(`Server running at http://${hostname}:${port}/`);
   });
   

   • server.listen(...): Makes the server begin listening for incoming connections on the specified port and hostname.
   • Callback Function: After the server successfully starts, it executes this callback function, logging a message to the console indicating that the server is up and running.

Step 5: Run Your HTTP Server

To start your server, simply run the following command in your terminal:

node server.js

If all goes well, you should see this output:

Server running at http://127.0.0.1:3000/

Understanding the Output:

• Server Running Message: Indicates that your HTTP server is now active and accepting HTTP requests.
• URL (http://127.0.0.1:3000/): This is the full URL where your server can be accessed from your local machine.
  • http://: Protocol used to access the server over HTTP.
  • 127.0.0.1: IPv4 loopback address, equivalent to localhost.
  • 3000: Port number where the server is listening.

Step 6: Accessing Your HTTP Server

You can verify that your server is running and functional by accessing its URL from a web browser or using a tool like curl.

Using a Web Browser

1. Open any web browser (e.g., Chrome, Firefox).
2. In the address bar, enter:

   http://127.0.0.1:3000/
   

3. Press Enter.

You should see the text Hello, World! displayed in your browser window.

(Note: The image above is just a placeholder. When you access your server, you’ll see the actual "Hello, World!" text)

Using curl Command

Alternatively, you can use the curl command-line tool to send a request to your server.

curl http://127.0.0.1:3000/

You should receive the following output in your terminal:

Hello, World!

Step 7: Gracefully Stopping the Server

Once you're done testing your server, it's important to stop it to free up resources.

Keyboard Shortcut:

In most terminals, you can stop the Node.js process by pressing:

Ctrl + C

When you press these keys, you might see:

^C

Followed by:

Terminated

These messages indicate that the process has been stopped.

Bonus Example: Serving HTML Content Instead of Plain Text

While serving plain text is straightforward, serving HTML allows you to create more dynamic and visually appealing pages. Below is an example of how to modify your server to serve HTML content.

1. Create an index.html File:

   In your project directory, create a new file named index.html and add some basic HTML content:

   <!-- index.html -->
   
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Node.js Server</title>
   </head>
   <body>
       <h1>Welcome to My Node.js Server!</h1>
       <p>This is my first HTTP server using Node.js.</p>
   </body>
   </html>
   

2. Modify server.js to Serve HTML:

   Update your server.js file to read the index.html file and serve its contents.

   // server.js
   
   const http = require('http');
   const fs = require('fs');
   const path = require('path');
   
   const hostname = '127.0.0.1';
   const port = 3000;
   
   // Create the server instance
   const server = http.createServer((req, res) => {
       // Define the root directory and the requested file path
       const filePath = path.join(__dirname, 'index.html');
   
       // Read the HTML file
       fs.readFile(filePath, 'utf8', (err, data) => {
           if (err) {
               // Handle error
               res.statusCode = 500; // Internal Server Error
               res.setHeader('Content-Type', 'text/plain');
               res.end('Internal Server Error\n');
               return;
           }
   
           // Set the response headers
           res.statusCode = 200;
           res.setHeader('Content-Type', 'text/html');
   
           // Send the HTML content as the response
           res.end(data);
       });
   });
   
   // Start the server
   server.listen(port, hostname, () => {
       console.log(`Server running at http://${hostname}:${port}/`);
   });
   

   Explanation of Changes:

   • Importing Additional Modules:

     const fs = require('fs');  // File System module for reading files
     const path = require('path'); // Path module for handling file paths
     

   • Read File Operation:

     const filePath = path.join(__dirname, 'index.html');
     
     fs.readFile(filePath, 'utf8', (err, data) => {
         if (err) {
             res.statusCode = 500;
             res.setHeader('Content-Type', 'text/plain');
             res.end('Internal Server Error\n');
             return;
         }
     
         res.statusCode = 200;
         res.setHeader('Content-Type', 'text/html');
         res.end(data);
     });
     

     • filePath: Constructs the full path to the index.html file within your project directory.
     • fs.readFile(...): Reads the contents of the index.html file asynchronously.
       • 'utf8': Specifies the character encoding of the file.
       • Callback Function (err, data): Handles the result of the file reading operation.
         • If there’s an error (err), the server responds with a 500 Internal Server Error status and a corresponding message.
         • If the file is read successfully (data contains the file content), the server sets the status to 200 OK, changes the content type to text/html, and sends the HTML data as the response.

3. Run the Updated Server:

   Restart your server:

   node server.js
   

   You should see the same starting message:

   Server running at http://127.0.0.1:3000/
   

4. Access the HTML Page:

   • Web Browser: Go to http://127.0.0.1:3000/ in your browser. You should now see the formatted HTML content:

     

     (Again, the actual content will be the one defined in your index.html file)

   • curl Command: Use curl to inspect the response:

     curl http://127.0.0.1:3000/
     

     You should get the raw HTML content printed in your terminal.

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>My Node.js Server</title>
     </head>
     <body>
         <h1>Welcome to My Node.js Server!</h1>
         <p>This is my first HTTP server using Node.js.</p>
     </body>
     </html>
     

Summary

In this step-by-step guide, you learned how to create a simple HTTP server using Node.js. Here’s a quick recap of the main points:

1. Setup Your Environment: Install Node.js and initialize a new project with npm.
2. Create server.js: Write the basic code to create and start an HTTP server.
3. Start the Server: Use the node command to run your server.
4. Test the Server: Verify the server’s functionality by accessing it in a web browser or using curl.
5. Serve HTML Content: Modify the server to handle HTML files, enhancing its capabilities.

This foundational knowledge will help you build more complex applications and servers as you continue to learn about Node.js.

Resources for Further Learning

• Official Node.js Documentation: https://nodejs.org/docs/latest/api/http.html
• Node.js HTTP Examples: https://github.com/nodejs/examples/tree/main/http
• YouTube Tutorials: Search for beginner-friendly Node.js tutorials on platforms like YouTube.