Node.js is a popular open-source, cross-platform, JavaScript runtime environment that allows you to run JavaScript code on the server side. It's widely used for building scalable and high-performance web applications, and it's supported by a vast ecosystem of libraries and frameworks.

One of the most popular Node.js frameworks is Express, which provides a simple and flexible way to build web applications and APIs. In this beginner's guide, we'll cover the basics of Node.js and the Express framework, including how to install them, how to create a simple web app, and how to add some basic functionality.

Prerequisites

Before we get started, you'll need to have Node.js and npm (Node Package Manager) installed on your machine. You can download the latest version of Node.js from the official website (nodejs.org) and follow the installation instructions for your operating system.

Creating a Basic Node.js and Express Application

Once you have Node.js and npm installed, you can create a new directory for your project and initialize it with npm:

mkdir myapp
cd myapp
npm init

This will create a package.json file that contains the metadata and dependencies for your project. You can accept the default options or customize them as needed.

Next, you can install the Express framework using npm:

npm install express

This will download and install the latest version of Express and its dependencies in your project directory.

Now you're ready to create a basic web app using Express. Create a new file called app.js in your project directory and add the following code:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

This code imports the express module, creates a new express application, defines a route for the root URL ('/'), and starts the server listening on port 3000. When a user visits the root URL in their browser, the server will respond with the message 'Hello World!'.

To start the server, run the following command:

node app.js

You should see a message in the console that says 'Example app listening on port 3000!'. Now open your web browser and visit http://localhost:3000. You should see the message 'Hello World!' displayed in the browser.

Adding More Functionality to Your Web App

Now that you've created a basic web app, you can add more functionality to it using Express. Here are some examples:

1. Serve Static Files: You can use the express.static() middleware to serve static files, such as HTML, CSS, and JavaScript files. Create a new directory called public in your project directory and add some HTML and CSS files to it. Then, add the following code to your app.js file:

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

   Now, when a user visits the URL http://localhost:3000/index.html, Express will serve the index.html file from the public directory.

2. Handle POST Requests: You can use the app.post() method to handle HTTP POST requests. For example, you can create a simple form that allows users to submit a message, and then display the message on the page. Here's an example:

    app.get('/message', (req, res) => {
      res.sendFile(__dirname + '/message.html');
    });
   
    app.post('/message', (req, res) => {
      const message = req.body.message;
      res.send(`You submitted the message: ${message}`);
    });
   

3. Use Template Engines: You can use template engines, such as EJS or Handlebars, to generate dynamic HTML content. For example, you can create a list of items and display them on the page using a template engine. Here's an example using EJS:

    app.set('view engine', 'ejs');
   
    app.get('/list', (req, res) => {
      const items = ['apple', 'banana', 'orange'];
      res.render('list', { items: items });
    });
   

   This code sets the view engine to EJS and defines a route for the URL /list. When a user visits this URL, the server will render the list.ejs template and pass in an array of items. The template will then generate the HTML code to display the list of items on the page.

Conclusion

In this beginner's guide, we covered the basics of Node.js and the Express framework, including how to create a simple web app and add some basic functionality. We also explored some advanced topics, such as serving static files, handling POST requests, and using template engines to generate dynamic HTML content.

With this knowledge, you can start building your own web applications using Node.js and the Express framework. There are many resources available online, including the official Node.js and Express documentation, that can help you learn more about these powerful tools.

If you liked the article, please engage with me on instagram or twitter, I'm just starting out!

• Instagram: instagram.com/coderbible

• Twitter: twitter.com/CoderBible