Serving Static Files & EJS Templates

🦁 Express.jsLesson 6Beginner

Express makes serving static files such as images, CSS files, and JavaScript files extremely straightforward. It also natively supports dynamic template rendering engines like EJS.

1 Serving Static Assets

To serve static files, use the built-in express.static middleware. Typically, static assets are stored inside a folder named public:

JavaScript — static_files.js

const express = require("express");
const path = require("path");
const app = express();

// Serve assets under the /static URL prefix
app.use("/static", express.static(path.join(__dirname, "public")));

2 Configuring EJS Template Engine

EJS (Embedded JavaScript) lets you generate HTML pages with template interpolation tags:

JavaScript — view_engine.js

app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));

app.get("/welcome", (req, res) => {
  res.render("welcome", {
    title: "Welcome Page",
    user: "Balaji Nayak"
  });
});

3 Code Challenge

Challenge: Write a basic EJS layout page inside the views/ folder named welcome.ejs. Display a loop rendering an array of technology strings passed down from your controller.