Tutorials


Serving static files in Express JS and EJS


Serving static files such as CSS, JavaScript, and images in an Express.js application is essential for delivering a fully functional and styled web application. Here’s how you can serve static files and use them in your EJS templates.

1. Setting Up Static File Serving

Express.js provides a built-in middleware function called express.static to serve static files. Here’s how to set it up:

  1. Create a Directory for Static Files:

    Common practice is to place your static files (CSS, JS, images) in a directory named public or similar.

    project-directory/
├── public/
│   ├── css/
│   ├── js/
│   └── images/
└── views/

  2. Configure Express to Use the Static Directory:

    In your main Express application file (e.g., app.js or server.js), use express.static to serve the files:

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

// Set up the static files directory
app.use(express.static(path.join(__dirname, 'public')));

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

    The express.static middleware will serve files from the public directory. For example, if you have a CSS file located at public/css/style.css, it will be accessible at /css/style.css.

2. Using Static Files in EJS Templates

Once you’ve set up static file serving, you can include these files in your EJS templates. Here’s how you reference CSS, JavaScript, and image files:

Example EJS Template (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>My Page</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <img src="/images/logo.png" alt="Logo">
    <script src="/js/script.js"></script>
</body>
</html>

In this example:

  • <link rel="stylesheet" href="/css/style.css"> includes a CSS file.
  • <img src="/images/logo.png" alt="Logo"> includes an image.
  • <script src="/js/script.js"></script> includes a JavaScript file.

3. Organizing Static Files

Organize your static files within the public directory. Here’s a common structure

public/
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

4. Handling Static Files in Production

For production environments, ensure that your static files are optimized and minified. Consider using tools like:

  • Webpack or Parcel for bundling and minifying JavaScript and CSS files.
  • Image optimization tools to compress images without losing quality.

5. Serving Static Files with Different Routes

If you need to serve static files from different routes or a different directory, you can use express.static multiple times with different options:

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

In this case, static files will be served under the /static route. For example, public/css/style.css would be accessible at /static/css/style.css.

Summary

  1. Set Up Directory: Create a directory (e.g., public) for static files.
  2. Configure Middleware: Use express.static to serve static files from the directory.
  3. Reference Files in EJS: Use relative paths in your EJS templates to include static files.
  4. Optimize for Production: Use build tools and optimizers to prepare static files for production.
  5. Custom Routes: Serve static files from different routes if necessary.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about