How to load a CSS file in Express.js and Node.js

# How to load a CSS file in Express.js and Node.js

The example below assumes that you have the following folder structure.

shell

Copied!
my-project/
  └── index.js
  └── views/
    └── home.ejs
  └── public/
    └── css/
      └── style.css

project folder structure

To load a CSS file in an Express.js project:

Create an index.js file that sets up your Express.js project.

index.js

Copied!
// 👇️ Using ES6 modules import/export syntax
import express from 'express';
import path from 'path';
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'bobbyhadz.com',
    message: 'Example message: bobbyhadz.com',
    salary: 500,
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

The code for this article is available on GitHub

The file above uses the ES6 modules import/export syntax.

If you use the CommonJS require() syntax, use the following code sample instead.

index.js

Copied!
// 👇️ using CommonJS require() syntax
const express = require('express');
const path = require('path');

const app = express();

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'bobbyhadz.com',
    message: 'Example message: bobbyhadz.com',
    salary: 500,
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

In our index.js file, we set up static file serving.

index.js

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

We also set up ejs as the template engine.

index.js

Copied!
app.set('view engine', 'ejs');

Make sure you have the module installed.

shell

Copied!
npm init -y

# 👇️ install using NPM
npm install express ejs

# or using YARN
yarn add express ejs

Create a views directory in the root directory of your project and add a home.ejs file to it.

Here is the code for the views/home.ejs file.

views/home.ejs

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="/css/style.css"
    />
  </head>
  <body>
    <h2>bobbyhadz.com</h2>

    <h2><%= message %></h2>

    <h2><%= salary %></h2>
  </body>
</html>

The code for this article is available on GitHub

By default, Express looks for your templates in a views directory that is located in the root of your project (where your package.json file is).

Create a public/css/style.css file.

In other words, in the root directory of your project create a public directory and add a css folder to it.

In the public/css folder, create a style.css file.

public/css/style.css

Copied!
body {
  background-color: lime;
}

Open your terminal in the root directory of your project (where your package.json) file is and run the following command to start your Express.js server.

shell

Copied!
npx nodemon index.js

If I open http://localhost:5000, I can see that the style.css file is applied and the background-color of the body is lime.

css file loaded successfully in express

The example assumes that you have the following folder structure.

shell

Copied!
my-project/
  └── index.js
  └── views/
    └── home.ejs
  └── public/
    └── css/
      └── style.css

project folder structure

The important parts of the code are:

In your index.js (or app.js) file, you have to set up static files serving.

index.js

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

The example uses a directory called public/ to serve CSS files, images and JavaScript files.

The public directory should be located in the root of your project (where your package.json file is).

Note that the public directory is not included in the path that is used to load your static files.

views/home.ejs

Copied!
<link
  rel="stylesheet"
  type="text/css"
  href="/css/style.css"
/>

The code for this article is available on GitHub

Notice that the path starts at the css/ directory and not at public.

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

Suppose you have the following public/ directory.

shell

Copied!
my-project/
  └── public/
    └── css/
      └── style.css
    └── images/
      └── house.png

updated folder structure

You would load the image and the CSS file in your views/home.ejs file as follows.

views/home.ejs

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="/css/style.css"
    />
  </head>
  <body>
    <h2>bobbyhadz.com</h2>

    <img alt="house" src="/images/house.png" />

    <img />

    <h2><%= message %></h2>

    <h2><%= salary %></h2>
  </body>
</html>

load css file success

The code for this article is available on GitHub

Notice that we start in the css directory when loading the CSS file and in the images directory when loading the image.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to load a CSS file in Express.js and Node.js

# How to load a CSS file in Express.js and Node.js

# Additional Resources

Borislav Hadzhiev