---

Hello there! In this tutorial, we'll explore the exciting world of serving static files in Express.js. We'll learn how to deliver static files like HTML, CSS, JavaScript, images, and more to enhance your web application. So, let's get started and make your web application come alive!

---

Setting Up the Project

Before we dive into serving static files, let's set up a new Node.js project. Follow these steps to get started:

Step 1:

Create a new directory for your project and navigate to it in your terminal.

---

Step 2:

Initialize a new Node.js project by running the following command:

This will generate a package.json file for your project.

---

Step 3:

Install the necessary modules by running the following command:

Now that we have our project set up, let's start serving static files with Express.js.

---

Serving Static Files

Express.js makes serving static files a breeze. You can serve files such as HTML, CSS, JavaScript, images, and more using the built-in express.static() middleware.

Step 1:

Create a new JavaScript file, e.g., server.js, and require the necessary modules at the top of the file:

---

Step 2:

Serve static files using express.static() middleware:

In this example, we assume you have a public directory in your project where you store your static files. The express.static() middleware is set up to serve files from this directory. You can customize the directory path as per your project structure.

---

Step 3:

Start the server and listen for incoming requests:

That's it! You now have a server that can serve static files. Run the command node server.js in your terminal, and your server will be up and running.

---

Accessing Static Files

With your server set up to serve static files, let's see how you can access them in your web application.

Step 1:

Create an HTML file, e.g., index.html, in your public directory:

---

Step 2:

Create CSS and JavaScript files, e.g., styles.css and script.js, in the public directory.

Now, when you access your web application through the browser, Express.js will automatically serve the index.html file along with the associated CSS and JavaScript files.

There you go! You've successfully learned how to serve static files in Express.js and make your web application come alive. By serving static files, you can enhance your application with stylesheets, scripts, images, and other essential assets.

Remember to organize your static files in a dedicated directory, such as public, and use the express.static() middleware to serve them. Feel free to create subdirectories within the public to further organize your assets.

Additionally, you can leverage the power of templating engines like EJS or Handlebars to dynamically generate HTML pages with server-side data.