Handling static files using Express JS in a Comprehensive NODE JS Tutorial

In this tutorial, we will be discussing how to serve static files using Express JS, which is a popular web application framework for Node.js. Serving static files is a common requirement in web development, as it allows you to serve files such as images, CSS, JavaScript, and other static assets that are not dynamically generated by your server. This tutorial assumes that you have a basic understanding of Node.js and Express.

To get started, make sure you have Node.js installed on your machine. You can download it from the official Node.js website (https://nodejs.org/). Once you have Node.js installed, you can create a new directory for your project and navigate into it using the command line.

Next, you can initialize a new Node.js project by running the following command:

npm init -y

This will create a package.json file in your project directory, which will contain information about your project and its dependencies.

Now, you can install Express by running the following command:

npm install express

Next, create a new file called app.js in your project directory and add the following code to it:

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

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

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

In this code, we are creating a new Express app and using the express.static() middleware to serve static files from the public directory. This means that any files in the public directory will be served to clients when they request them.

You can create a public directory in your project directory and add some static files to it, such as index.html, styles.css, and script.js.

public/
  index.html
  styles.css
  script.js

Now, you can run your server by running the following command:

node app.js

This will start your server on http://localhost:3000. You can access your static files by visiting http://localhost:3000/index.html, http://localhost:3000/styles.css, and http://localhost:3000/script.js in your web browser.

If you want to change the directory from which static files are served, you can pass a different directory as an argument to the express.static() middleware. For example:

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

This will serve static files from the assets directory instead of the public directory.

In conclusion, serving static files in Express is a simple and straightforward process that can be done using the express.static() middleware. This allows you to serve static assets to clients and build web applications with static content. I hope this tutorial has been helpful in getting you started with serving static files in Express JS. Thank you for reading!