Directory Structure of EJS
When using EJS (Embedded JavaScript) with an Express.js application, organizing your directory structure can help maintain a clean and manageable codebase. Here’s a common directory structure for an EJS-based Express project:
1. Basic Directory Structure
Here’s a basic example of how you might structure your project:
my-ejs-project/
│
├── node_modules/ # Directory where npm packages are installed
│
├── public/ # Publicly accessible files (CSS, JS, images)
│ ├── css/
│ ├── js/
│ └── images/
│
├── views/ # EJS template files
│ ├── partials/ # Reusable partials (header, footer, etc.)
│ └── index.ejs # Main template file
│
├── app.js # Main application file
├── package.json # Project metadata and dependencies
└── package-lock.json # Exact versions of dependencies
2. Detailed Explanation
1. node_modules/
- This directory contains all the npm packages your project depends on. It is automatically created and managed by npm.
2. public/
- Purpose: Stores static files that are served directly to the client.
- Subdirectories:
css/: Contains CSS stylesheets.js/: Contains JavaScript files.images/: Contains image files.
3. views/
- Purpose: Contains EJS template files.
- Subdirectories:
partials/: Contains reusable partial templates like headers, footers, and navigation bars. These can be included in other EJS templates using<%- include('partials/header') %>.index.ejs: A main template file that is rendered for a particular route.
4. app.js
- Purpose: The main entry point for your Express application. This file sets up your Express server, middleware, and routes.
5. package.json
- Purpose: Defines your project’s dependencies, scripts, and metadata. This file is created when you initialize your project with
npm init.
6. package-lock.json
- Purpose: Locks the versions of your dependencies to ensure consistent installs across different environments.
Example Configuration in app.js
Here's how you might configure your Express application to use EJS with the directory structure outlined above:
const express = require('express');
const path = require('path');
const app = express();
// Set the view engine to EJS
app.set('view engine', 'ejs');
// Set the directory for EJS templates
app.set('views', path.join(__dirname, 'views'));
// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));
// Define a route
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' });
});
// Start the server
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Creating Templates
1. views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<%- include('partials/header') %>
<h1>Welcome to <%= title %></h1>
<script src="/js/script.js"></script>
</body>
</html>
2. views/partials/header.ejs
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
Summary
public/: For static assets like CSS, JS, and images.views/: For EJS templates and partials.app.js: The main file that configures your Express app.package.json: Metadata and dependencies for your project.package-lock.json: Locks versions of dependencies.
This structure helps keep your code organized, making it easier to manage templates, static files, and server configuration.