How to Build a Simple Web Server with Node.js — SitePoint

Node.js is an open-source, cross-platform JavaScript runtime environment allowing builders to assemble server-side features exterior a browser. It could be used to assemble mission-critical manufacturing features that perform terribly correctly. On this wise info, we’ll check out how one can create your web server with Node.js.

Key Takeaways

• Implementing a straightforward web server with Node.js. This info reveals prepare and deploy an web server using Node.js. It walks by way of each step, along with mission initialization, Particular.js integration, and many essential choices, providing a robust foundation for anyone new to Node.js.
• Developing dynamic web features. This info covers a big selection of functionalities, akin to coping with sorts, responding to individual requests, and dynamically serving web pages, which can be essential to creating your web features interactive and attention-grabbing.
• Exploring Node.js choices. Dive deeper into Node.js’s decisions for web enchancment, along with work with static info, cope with errors, and implement sort submissions. This info gives a wise technique to using Node.js to assemble feature-rich web features.

Half 1: Problem Setup and Arrange

Step 1: Arrange Node.js and npm

To start setting up our web software program, assure you’ll have Node.js and npm put in in your system. Node.js gives a JavaScript runtime environment, whereas npm is the bundle supervisor for Node.js. Chances are you’ll get hold of and arrange Node.js from the official site.

To guarantee that Node.js and npm are precisely put in, open your terminal and run the subsequent directions:

node -v
npm -v

Step 2: Initialize a model new Node.js Problem

Create a model new itemizing in your mission and initialize a model new Node.js mission by working the subsequent command in your terminal:

mkdir book-club
cd book-club
npm init -y

This command will create a bundle.json file in your mission. It could comprise metadata regarding the mission, along with its dependencies:

{ 
  "title": "book-club", 
  "mannequin": "1.0.0", 
  "description": "", 
  "predominant": "index.js", 
  "scripts": { "check out": 
  "echo "Error: no check out specified" && exit 1" }, 
  "key phrases": [], 
  "creator": "", 
  "license": "ISC" }

Step 3: Arrange Particular.js

Particular.js is a popular web framework for Node.js, with choices for setting up web and mobile features. The command underneath installs Particular.js and offers it as a dependency in your bundle.json file:

npm arrange categorical

Half 2: Setting Up the Particular Server

Step 1: Create a model new file for the server

Now that the mission is prepared up, create a model new file named app.js inside the mission itemizing. This file will comprise the code for the Particular server.

Step 2: Import Particular.js

On the prime of your app.js file, import the Particular.js module:

const categorical = require('categorical');

Step 3: Create an Particular software program

Subsequent, create an event of an Particular software program:

const app = categorical();

The categorical() function is a top-level function exported by the Particular module. It creates an Particular software program, which we assign to the app variable.

Step 4: Define a route

Define a route for the path / with a straightforward message when accessed:

app.get("https://www.sitepoint.com/", (req, res) => {
 res.ship('Whats up World!');
});

Proper right here, app.get() is a function that tells the server what to do when a GET request is made to a selected path, on this case, /. This function takes two arguments: the path and a callback function that takes a request and a response.

Step 5: Start the server

Lastly, let’s start the server on port 3000:

const port = 3000;
app.hear(port, () => {
 console.log(`Server is working at http://localhost:${port}`);
});

The app.hear() function begins the server and makes it hear for requests on the required port.

Half 3: Developing the Utility Efficiency

Now that we now have the Particular server prepare, let’s start setting up the making use of’s efficiency by creating a few completely completely different routes.

Step 1: Create a model new file for messages

In your mission itemizing, create a model new file named messages.js. This file will comprise the messages that your server will ship as responses:

module.exports = {
 home: 'Welcome to our E book Membership!',
 about: 'About Us',
 notFound: '404 Not Found'
};

Step 2: Import messages into your server file

On the prime of your app.js file, import the messages:

const messages = require('./messages');

Step 3: Use messages in your routes

Now, use these messages inside the routes:

app.get("https://www.sitepoint.com/", (req, res) => {
 res.ship(messages.home);
});
app.get('/about', (req, res) => {
 res.ship(messages.about);
});
app.use((req, res) => {
 res.standing(404).ship(messages.notFound);
});

Proper right here, app.use() is a method that often known as for every request made to the server. We’re using it proper right here to cope with all routes that aren’t outlined and ship a 404 Not Found message.

Half 4: Together with Static File Serving

Step 1: Create a model new itemizing for static info

Create a model new itemizing named public. This itemizing will comprise all your static info:

mkdir public

Step 2: Add some static info

For the goal of this info, let’s add a straightforward HTML file and a CSS file. In your public itemizing, create a model new file named index.html and add the subsequent code:

DOCTYPE html>
html>
head>
  title>E book Membershiptitle>
  hyperlink rel="stylesheet" variety="textual content material/css" href="/varieties.css">
head>
physique>
  h1>Welcome to our E book Membership!>/h1>
physique>
html>

Moreover, create a model new file named varieties.css inside the public itemizing and add the subsequent code:

physique {
  font-family: Arial, sans-serif;
}

Step 3: Use categorical.static to serve static info

Add the highway underneath to the app.js file, sooner than the route definitions:

app.use(categorical.static('public'));

The categorical.static function is a built-in middleware function in Particular.js. It serves static info and takes the itemizing title from which you must serve info as an argument.

Half 5: Coping with POST Requests

Step 1: Add a sort to index.html

In your index.html file, add a sort with a single enter space and a submit button:

sort movement="/submit" method="put up">
  enter variety="textual content material" title="information" placeholder="Enter a information title">
  button variety="submit">Submitbutton>
sort>

This kind will ship a POST request to the /submit path. The request physique will embrace the enter space’s price.

Step 2: Arrange body-parser

It is worthwhile to arrange a middleware often known as body-parser to cope with the data despatched inside the POST request:

npm arrange body-parser

Step 3: Import and use body-parser

Import body-parser into the app.js file:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

The bodyParser.urlencoded() function parses incoming request our our bodies obtainable beneath the req.physique property.

Step 4: Cope with POST requests

Now, create a model new endpoint to cope with this POST request inside the app.js file:

app.put up('/submit', (req, res) => {
  const information = req.physique.information;
  console.log(`E book submitted: ${information}`);
  res.ship(`E book submitted: ${information}`);
});

Half 6: Together with a Data Retailer

On this half, we’ll add a straightforward info retailer to our software program to retailer the books that prospects submit. We’ll use an array to retailer the data for simplicity.

Step 1: Create a information retailer

On the prime of your app.js file, create an array to retailer the books:

const books = [];

Step 2: Change POST request handler

Change the handler for POST requests in order so as to add the submitted information to the books array:

app.put up('/submit', (req, res) => {
    const information = req.physique.information;
    books.push(information);
    console.log(`E book submitted: ${information}`);
    res.ship(`E book submitted: ${information}`);
});

Step 3: Create a path to view all books

Create a model new route handler that returns all the submitted books:

app.get('/books', (req, res) => {
  res.ship(books.be a part of(', '));
});

Phrase: in a real-world software program, you will probably retailer your info in a database. Proper right here, the data inside the array will in all probability be misplaced every time you restart your server.

Half 7: Together with Error Coping with

On this half, we’ll create an error handler. Particular.js gives a built-in error handler. Nevertheless you could as nicely create your particular person error coping with middleware.

Step 1: Create an error coping with middleware

In your app.js file, add the subsequent code on the end of the file:

app.use((err, req, res, subsequent) => {
  console.error(err.stack);
  res.standing(500).ship('One factor Went Unsuitable!');
});

This middleware function has 4 arguments instead of the identical outdated three (req, res, subsequent). This function often known as every time there’s an error in your software program.

Step 2: Use the next function to cross errors

In case you cross an argument to the subsequent() function, Particular.js will assume it’s an error, skip all subsequent middleware options, and go straight to the error coping with middleware function:

app.put up('/submit', (req, res, subsequent) => {
  const information = req.physique.information;
  if (!information) {
    const err = new Error('E book title is required');
    return subsequent(err);
  }
  books.push(information);
  console.log(`E book submitted: ${information}`);
  res.ship(`E book submitted: ${information}`);
});

This handler checks if a information title was provided inside the POST request. If not, it creates a model new Error object and passes it to the subsequent function. This will likely skip all subsequent middleware options and go straight to the error coping with middleware.

Half 8: Serving HTML Pages

On this half, we’ll modify our software program to serve HTML pages instead of plain textual content material. This will likely allow you to create further difficult individual interfaces.

Step 1: Arrange EJS

EJS (Embedded JavaScript) is a straightforward templating language that permits you to generate HTML markup using plain JavaScript:

npm arrange ejs

Step 2: Set EJS as a result of the view engine

In your app.js file, set EJS as a result of the view engine in your Particular software program:

app.set('view engine', 'ejs');

This tells Particular to utilize EJS as a result of the view engine when rendering views.

Step 3: Create a views itemizing

By default, Particular will look in a list named views in your views. Create this itemizing in your mission itemizing:

mkdir views

Step 4: Create an EJS view

In your views itemizing, create a model new file named index.ejs and add the subsequent code:

DOCTYPE html>
html>
head>
    title>E book Membershiptitle>
head>
physique>
    h1> message %>h1>
    sort movement="/submit" method="put up">
        enter variety="textual content material" title="information" placeholder="Enter a information title">
        button variety="submit">Submitbutton>
    sort>
    h2>Submitted Books:h2>
    ul>
         books.forEach(function(information) { %>
            li> information %>li>
         }); %>
    ul>
physique>
html>

The placeholder is used to output the value of the message variable.

app.put up('/submit', (req, res) => {
  const information = req.physique.information;
  books.push(information);
  console.log(`E book submitted: ${information}`);
  res.redirect("https://www.sitepoint.com/");
});

app.get("https://www.sitepoint.com/", (req, res) => {
   res.render('index', { message: messages.home, books: books });
});

node app.js

npm start