# Introduction to Node.js and Express Framework: Building a Simple Web App

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 ([**https://nodejs.org**](https://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:

```bash
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:

```bash
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:

```javascript
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:

```bash
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`](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:  
    
    ```javascript
    app.use(express.static('public'));
    ```
    
    Now, when a user visits the URL [`http://localhost:3000/index.html`](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`](http://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:
    
    ```javascript
    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:
    
    ```javascript
    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: [**https://www.instagram.com/coderbible/**](https://www.instagram.com/coderbible/)
    
* Twitter: [**https://twitter.com/CoderBible**](https://twitter.com/CoderBible)