Creating a Node.js Server with Simple HTML/CSS Interaction

In this blog post, we will learn how to create a simple Node.js server that interacts with HTML and CSS to display “Hello World” in the middle of the screen. We will accomplish this without using any frameworks such as Express.js or Nest.js.

Introduction

Node.js is a powerful JavaScript runtime built on Chrome’s V8 JavaScript engine. It allows developers to build scalable network applications. In this tutorial, we will use Node.js to create a simple server and serve an HTML file that uses CSS to display “Hello World” in the center of the screen.

Step 1: Setting Up Node.js

First, you need to have Node.js installed on your system. If you haven’t installed it yet, you can download it from the official Node.js website or follow the below instructions:

Download Node.js: Visit the official Node.js website and download the appropriate version for your operating system. There are Windows, Linux, and macOS versions available.

Install Node.js: Open the downloaded file and follow the instructions in the installation wizard. The installer will also install npm, the Node Package Manager, which is very useful for managing your Node.js libraries.
Verify the Installation: Open your terminal or command prompt and type the following commands:

node -v
npm -v

These commands should display the installed versions of Node.js and npm respectively like below:

If you see the version numbers, congratulations! You have successfully installed Node.js and npm.

Step 2: Creating the Node.js Server

Create a new file named server.js and add the following code:

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

http
  .createServer(function (req, res) {
    fs.readFile("index.html", function (err, data) {
      res.writeHead(200, { "Content-Type": "text/html" });
      res.write(data);
      res.end();
    });
  })
  .listen(8080, () => {
    console.log("Server is running on http://localhost:8080");
  });

This code creates a simple HTTP server that listens on port 8080. When a request is received, it reads the index.html file and sends its content as the response.

Step 3: Creating the HTML and CSS Files

Next, create a new file named index.html and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="center">Hello World</div>
  </body>
</html>

This is a simple HTML file that includes a CSS file named styles.css and displays “Hello World” in a div with a class of “center”.

Now, create a new file named styles.css and add the following code:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  font-size: 45px;
  font-weight: 800;
}

This CSS code positions the “Hello World” text in the center of the screen.

With this basic setup assume that your folder structure contains the following example:

Step 4: Running the Server

To start the server, open your terminal, navigate to the directory containing your server.js file, and run the following command:

node server.js

it will show look exactly like below:

Now, if you open your web browser and navigate to http://localhost:8080, you should see “Hello World” displayed in the center of the screen.

Conclusion

In this tutorial, we learned how to create a simple Node.js server without using any frameworks. We also learned how to serve an HTML file and use CSS to position text in the center of the screen. This is a basic example, but it demonstrates the power and flexibility of Node.js for building web applications. Happy coding!