Blood Bank Management System Project with Source Code | Setting Up Static Path in Node.js with Express | Service Module API | React & Node JS Project Tutorial | Part 5

Learn how to create a fully functional Blood Bank Management System using modern technologies. This step-by-step guide is perfect for both beginners and experienced developers, offering source code and practical insights. With a focus on React JS, Node JS, and Bootstrap, you'll develop an efficient system for managing blood donations, inventory, and donors. Start building your blood bank management system today!

Technologies Used

  • React JS
  • Node JS
  • Bootstrap
  • HTML & CSS

Basic Requirement

  1. Node JS
  2. Editor
  3. Web browser

How to Set Up Static Path in Node.js with Express.js

In web applications, serving static files such as images, CSS, and JavaScript is a common requirement. Express.js makes it simple to serve static assets from a directory using the built-in middleware function express.static. This guide will walk you through how to set up a static path in Node.js with Express.

What is a Static File?

Static files are assets that the server sends directly to the client without modifying them. These include:

  • Images (e.g., .png, .jpg)
  • CSS files (e.g., .css)
  • JavaScript files (e.g., .js)
  • HTML files (e.g., .html)

Step 1: Install Express.js

If you haven’t installed Express.js yet, you can do so by running the following command in your Node.js project directory: 

npm install express

Step 2: Set Up a Static Directory

Create a directory called public/ or any directory of your choice. This folder will store all your static files like images, stylesheets, and client-side JavaScript files. 

mkdir public

Inside this public folder, you can create subfolders like css, images, and js to organize your static files: 

- public/
    - css/
    - images/
    - js/

Step 3: Serve Static Files with express.static

Now, let’s modify the app.js file (or the main file of your project) to serve static files from the public/ directory using the express.static middleware. 

const express = require('express');
const path = require('path'); // Path module to handle file paths
const app = express();

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));

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

Explanation:

  • express.static: This built-in middleware function allows us to serve static files.
  • path.join(__dirname, 'public'): This creates an absolute path by joining the current directory (__dirname) with the public folder, ensuring that it works across different environments.
  • app.use(): This mounts the middleware to serve the static files for the entire application.

Step 4: Add Static Files

Let’s create some static files in the public/ folder:

  • public/css/style.css
  • public/js/main.js
  • public/images/logo.png

Step 5: Accessing Static Files

Once the server is running, you can access your static files directly in the browser. For example:

You can now access this file at http://localhost:4000/index.html, and it will include your static CSS, JavaScript, and image files.

Step 6: Serve Static Files from Multiple Directories (Optional)

If you need to serve static files from multiple directories, you can add multiple express.static middleware functions like this: 

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'assets')));

Tutorial Topics