Getting Started with Express.js: Building a Basic Web Application in Node.js

Welcome to our next post on building web applications and APIs using Node.js and the Express.js framework. In this post, we will explore how to use Express.js to create a basic web application in Node.js, specifically for beginners. We will also show how to serve up an HTML file such as "index.html" using Express.js

Prerequisites:

Before we begin, it's important to note that you should have Node.js and npm (Node Package Manager) installed on your system. If you don't have them installed, you can check my previous post on how to do it.

Now that we have the prerequisites out of the way, let's start building our web application step by step.

Step 1: Create a new Node.js project

To create a new Node.js project, open a terminal or command prompt and navigate to the directory where you want to create your project. Run the following command to initialize a new Node.js project:

npm init

Step 2: Install express

To install express use the following command:

npm install express

Step 3: Create your entry file

As in our previous post, you need to create your entry file. Do this by creating a new file named "server.js" in the root of your project. This file will contain the code for your server.

Step 4: Add your server's code

Open the server.js file in a code editor and paste the following code:

const express = require('express')
const app = express()
const port = 3000

app.use(express.static(__dirname + '/public'))

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html')
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

This code uses the express.static() method to tell Express.js to serve all files in the 'public' folder as static resources. It also uses the app.get() method to handle a GET request for the '/' route and sends the 'index.html' file located in the 'public' folder as a response.

Step 7: Static Files

Create a new folder named "public" at the root of your project. This is where you will put your static files like HTML, CSS, and JavaScript files.

Inside the "public" folder, create a new file named "index.html" and insert the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Node!</title>
  </head>
  <body>
    <h1>Getting Started with Express.js</h1>
  </body>
</html>

This is a basic example of an HTML file, you can add more elements to it as per your requirement.

Step 9: Run the server

Run the server by executing the following command in the terminal:

node server.js

Step 10: View the results

Open your browser and go to "http://localhost:3000", you should see the content of the index.html file. Remember if you changed the port in step 4 change it here as well.

That's it! You've successfully created a basic web application using Node.js and Express.js and served up an HTML file. Remember, this is just the beginning, you can add more routes and features to your application as you learn more. Happy coding!

In the next post, we will explore the use of nodemon and connecting to MongoDB with our Express.js application. Nodemon is a utility that automatically restarts the node application when file changes in the directory are detected. This is a useful tool for development as it eliminates the need to manually restart the server every time a change is made. We will also dive deeper into using MongoDB as a database for our application and show how to connect to it using the popular Mongoose library. This will allow us to store and retrieve data in our application and take it to the next level. Stay tuned for more exciting developments! If you have any questions or run into any issues as you work through this tutorial, please feel free to reach out for help.

Mzaza's Corner

Mzaza's Corner

Getting Started with Express.js: Building a Basic Web Application in Node.js