Building a Simple Web Server with Node.js and ExpressJS

Photo by Taylor Vick on Unsplash

In the vast landscape of web development, having a fundamental understanding of creating a web server is akin to wielding a craftsman’s tool — essential for shaping the digital experiences we encounter daily. Node.js, with its non-blocking, event-driven architecture, stands as a formidable choice for crafting efficient and scalable servers.

This article serves as a guide for web developers, both novice and experienced, embarking on the journey of building a simple web server using Node.js. As we delve into the intricacies of server-side development, we’ll unravel the steps to set up a project, configure routes, serve static and dynamic content, and ultimately breathe life into a basic web server.

So, fasten your seatbelts as we navigate through the realm of Node.js, exploring the foundation of web server creation — one keystroke at a time.

Setting Up Node.js

— Installing Node.js and npm

Before we embark on our journey of crafting a web server, we need to ensure that Node.js and npm (Node Package Manager) are properly installed on our system. Head over to the official Node.js website to download and install the latest version. Once installed, npm comes bundled with Node.js.

To verify the installation, open your terminal or command prompt and run the following commands:

node -v
npm -v

These commands should display the installed versions of Node.js and npm, confirming a successful installation.

— Creating a Project Folder

With Node.js and npm at our disposal, let’s create a dedicated folder for our web server project. Navigate to your desired directory using the terminal and execute the following commands:

mkdir simple-web-server
cd simple-web-server

This creates a new folder named simple-web-server and navigates into it. Our project will unfold within this directory.

Initialising the Project

— Running npm init to set up the project

To initialize our Node.js project and generate a package.json file (which contains metadata about the project and its dependencies), we use the npm init command. Execute the following in your terminal:

npm init

This command will prompt you to provide information about your project, such as the package name, version, description, entry point (typically index.js), test command, and more. You can press Enter to accept the default values or customize them based on your preferences.

— Installing Necessary Packages

For our web server, we’ll use the popular Express framework. Install it using the following command:

npm install express

This command installs Express and adds it as a dependency in your package.json file.

Creating the Server

— Importing the Required Modules

In our index.js file (or whatever entry point you specified during npm init), let's start by importing the modules we need. We'll use express to create and configure our server:

// Importing required modules
const express = require('express');
const app = express();
const port = 3000; // You can choose any available port

— Configuring the Server with Express

Now, let’s configure our server using Express. We’ll create a simple route for the home page:

// Configuring the server with Express
app.get('/', (req, res) => {
  res.send('Hello, World!'); // Send a basic response for the home page
});

— Handling Basic Routes

You can expand on your server’s functionality by adding more routes. For example, let’s handle a route for /about:

// Handling basic routes
app.get('/about', (req, res) => {
  res.send('About Us Page'); // Send a response for the /about route
});

Now, our server responds to both the home page (/) and the about page (/about).

With these steps, we’ve set up a basic Express server with a couple of routes. In the upcoming sections, we’ll enhance our server to serve static files and handle dynamic content.

Serving Static Files

— Setting Up a ‘public’ Folder for Static Files

To serve static files like CSS, images, or client-side JavaScript, let’s create a ‘public’ folder in our project directory. This is a common convention for organizing static assets. Use the following command in your terminal:

mkdir public

— Using Middleware to Serve Static Content

Now, let’s modify our Express server to use middleware that serves static files from the ‘public’ folder:

// Setting up a 'public' folder for static files
app.use(express.static('public'));

// Handling basic routes
// ... (previous route handling code)

// Starting the server
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

With the express.static middleware, our server will look for static files in the 'public' folder. For example, if you have a file named styles.css in 'public/css', it can be accessed at http://localhost:3000/css/styles.css.

This addition enables us to incorporate styles, images, and other static assets into our web server.

Handling Dynamic Content

— Implementing Dynamic Routes

Static content is vital, but dynamic content adds a layer of interactivity to our server. Let’s create a dynamic route that handles parameters. Modify your server code to include the following:

// Handling dynamic routes
app.get('/profile/:username', (req, res) => {
  const username = req.params.username;
  res.send(`Profile Page of ${username}`);
});

In this example, the route /profile/:username expects a parameter, and we access it using req.params.username. For instance, visiting /profile/JohnDoe would display "Profile Page of JohnDoe."

— Utilizing Template Engines (e.g., ejs)

To render dynamic content more efficiently, we can use template engines. Install the ejs template engine using:

npm install ejs

Now, set up Express to use ejs and create a simple template:

// Configuring Express to use ejs
app.set('view engine', 'ejs');

// Rendering dynamic content with a template
app.get('/dynamic', (req, res) => {
  const data = { message: 'This is a dynamic page!' };
  res.render('dynamic', data);
});

Create a file named dynamic.ejs in a 'views' folder:

<!-- dynamic.ejs -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Page</title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

Now, visiting /dynamic will render a dynamic page with the message "This is a dynamic page!"

With these additions, our server can handle both static and dynamic content effectively.

Running the Server

— Writing the Start Script in package.json

To simplify running our server, let’s add a start script in the package.json file. Open package.json and modify the "scripts" section:

"scripts": {
  "start": "node index.js"
},

Now, you can start your server using:

npm start

This command executes the start script, which runs our index.js file.

— Starting the Server and Testing in a Web Browser

With everything set up, let’s start the server and see it in action. Run:

npm start

Visit http://localhost:3000 in your web browser, and you should see the "Hello, World!" message. Test the other routes we created, such as /about, /profile/JohnDoe, and /dynamic.

Congratulations! You’ve successfully built and run a simple web server with Node.js.

In this journey, we’ve covered the essentials of creating a web server using Node.js. From setting up the project to handling static and dynamic content, you now possess the foundational knowledge to expand and customize your server based on your web development needs.

As you continue to explore the vast realm of web development, may your coding adventures be both rewarding and inspiring. Happy coding!

Further Reading

Node.js Documentation:

Node.js Official Documentation: The official documentation is an excellent resource for understanding Node.js features and capabilities.

Express.js Documentation:

Express.js Official Documentation: Explore the official documentation to dive into the details of the Express framework, middleware, and advanced features.

npm Documentation:

npm Official Documentation: Understand the ins and outs of npm, the package manager for Node.js.

Template Engines:

EJS Documentation: Learn more about EJS, a popular template engine for Node.js.

Web Development Tutorials:

MDN Web Docs — Learn Web Development: Mozilla Developer Network provides comprehensive guides and tutorials on web development.

Node.js Best Practices:

Node.js Best Practices: A GitHub repository containing best practices for Node.js development.

Books:

• “Node.js Design Patterns” by Mario Casciaro: This book explores design patterns and best practices for building scalable and maintainable Node.js applications.
• “Express.js Guide” by Azat Mardan: A practical guide to building web applications with Express.js.

Online Courses:

Node.js — The Complete Guide (MVC, REST APIs, GraphQL, Deno): A comprehensive Udemy course covering various aspects of Node.js.

Remember, the world of web development is vast, and continuous learning is key to staying updated. Happy coding, Mayor! If you have any specific topics you’d like to explore further, feel free to let me know.

Thanks for coming this far 🎉

If this guide helped you, don’t forget to clap 👏 and share 🔄 it with fellow developers! Let’s spread the knowledge and help each other grow! 🚀

Happy coding! 💻✨