Serving static files in Node.js - Mini Project: Build & Apply

Serving Static Files with Node.js

📖 Scenario: You are building a simple Node.js server to serve static files like HTML, CSS, and images for a small website.

🎯 Goal: Build a Node.js server that serves static files from a folder called public using the express framework.

📋 What You'll Learn

Create an Express app instance

Set up a static file serving middleware for the public folder

Start the server listening on port 3000

Verify that files in public are accessible via the browser

💡 Why This Matters

🌍 Real World

Serving static files is a common need for websites to deliver HTML, CSS, JavaScript, and images to users.

💼 Career

Understanding how to serve static files with Node.js and Express is essential for backend web development roles.

1

Create Express app

Write code to import express and create an Express app instance called app.

Node.js

// Your code here to import express and create app

Need a hint?

Use import express from 'express' and then const app = express().

2

Configure static file serving

Add a line to use Express static middleware to serve files from the public folder using app.use(express.static('public')).

Node.js

import express from 'express';
const app = express();

// Add static middleware to serve 'public' folder

Need a hint?

Use app.use(express.static('public')) to serve static files.

3

Start the server

Write code to start the server listening on port 3000 using app.listen(3000).

Node.js

import express from 'express';
const app = express();

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

// Start server on port 3000

Need a hint?

Use app.listen(3000) to start the server.

4

Add a simple HTML file in public folder

Create a file named index.html inside the public folder with a simple HTML structure containing a heading <h1>Welcome</h1>.

Node.js

// Create 'public/index.html' file with Welcome inside

Need a hint?

Create a file public/index.html with a heading <h1>Welcome</h1>.