Dynamic content in EJS using Express

Dynamic content in EJS using Express

Let’s expand our previous knowledge about making a website with Node.js & EJS, by adding dynamic content into our pages! Let’s get started.

1. app.js

The app.js file is the main entry point for our Node.js application. It sets up an Express application, configures EJS as the view engine, and serves static files from the public directory.

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

// Set EJS as the view engine
app.set('view engine', 'ejs');

// Serve static files from the 'public' directory
app.use(express.static('public'));

// Sample data for the website and users
const websiteData = {
  title: 'My Awesome Node.js Website',
  description: 'Building websites with Node.js and EJS',
  author: 'A CodeSpiral Student',
};

const usersData = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'SkyOPG' },
  { id: 3, name: 'meFqulted' },
];

// Define route for the home page
app.get('/', (req, res) => {
  res.render('index', { data: websiteData });
});

// Define route for the users page
app.get('/users', (req, res) => {
  res.render('users', { users: usersData, data: websiteData });
});

// Start the server
app.listen(3000, () => {
  console.log(`Server running at http://localhost:3000/`);
});

Here, we’ve created two routes:

  • Home Page Route (/): Renders the index.ejs template with the websiteData passed as variables.

  • Users Page Route (/users): Renders the users.ejs template with both the usersData and websiteData passed as variables.

2. views/index.ejs

The index.ejs file is an EJS template that represents the home page of our website. It uses EJS syntax to embed dynamic content into the HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title><%= data.title %></title>
</head>
<body class="bg-gray-200">
  <div class="container mx-auto my-8">
    <h1 class="text-4xl font-bold mb-4"><%= data.title %></h1>
    <p class="text-lg"><%= data.description %></p>
    <p class="text-sm text-gray-600 mt-2">Author: <%= data.author %></p>
  </div>
</body>
</html>

Key points:

  • <%= data.title %>: Embeds the website title dynamically.
  • <%= data.description %>: Embeds the website description dynamically.
  • <%= data.author %>: Embeds the website author dynamically.

3. views/users.ejs

The users.ejs file is an EJS template representing the users page. Similar to the home page template, it uses dynamic content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title><%= data.title %> - Users</title>
</head>
<body class="bg-gray-200">
  <div class="container mx-auto my-8">
    <h1 class="text-4xl font-bold mb-4"><%= data.title %> - Users</h1>
    <ul>
      <% users.forEach(user => { %>
        <li class="text-lg"><%= user.name %></li>
      <% }); %>
    </ul>
  </div>
</body>
</html>

Key points:

  • <% users.forEach(user => { %>: Iterates through the usersData array.
  • <%= user.name %>: Embeds each user’s name dynamically.

4. public/styles/tailwind.css - Tailwind CSS

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

This file is the Tailwind CSS configuration that styles our HTML elements.

5. Building and Running the Complete Project

  1. Install Dependencies:

    npm install

  2. Build Tailwind CSS:

    npm run build:css

  3. Run the Express Application:

    node app.js

Now, visit http://localhost:3000 for the home page and http://localhost:3000/users for the users page in your web browser. The website should display both pages with dynamic content from the server.

This project demonstrates a simple Node.js website with multiple routes and EJS templates. It provides a foundation for further customization and expansion based on your requirements. Enjoy coding!

Similar Posts

Getting Started with Node.js

Getting Started with Node.js

Deeper Dive into Routes and JSON API

Deeper Dive into Routes and JSON API