How to Add Custom CSS & JavaScript Files to an ExpressJS App
Tags: node, css, javascript
Published: 2019-10-12 09:16:58

---
title: How to Add Custom CSS & JavaScript Files to an ExpressJS App
published: true
description: Adding local CSS and JavaScript files to an ExpressJS app
tags: NodeJS, CSS, JavaScript
---

This tutorial assumes the use of [EJS](https://ejs.co/) as the view template engine of your Express app. 

###Step 1: Generate an Express App Skeleton

[The easiest way to create an Express app is by using the express-generator](https://dev.to/yogesnsamy/how-to-quickly-generate-an-express-app-skeleton-and-then-edit-it-5b00).

###Step 2: Download CSS and JavaScript Files
In this example, we're going to use [MaterializeCSS](https://materializecss.com/) to beautify our app. 

- Go to [MaterializeCSS's website](https://materializecss.com/getting-started.html) and download the compressed CSS and JavaScript files. 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ymevz5vo8lft8kbde57x.jpg)
- Once downloaded, extract the files into the folder *public* in your app.
- Take note to place CSS and JavaScript files into different folders inside the *public* folder.
* The file 'materialize.css' will go into folder *public/stylesheets*.
* The file 'materialize.js' will go into folder *public/javascripts*.

###Step 3: Create *partials* files 
We'll create a *header* and a *footer* file inside the folder *partials*. These files will be linked our EJS files. We create partial files to easily link external files to EJS files.

- Create a folder named *partials* inside folder *views*.
- Create a new file called *header.ejs* inside folder *partials* with the following content:
```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>iVMS</title>
    <link rel="stylesheet" href="/stylesheets/materialize.css" />
  </head>
  <body>
    <div class="container"> 
```

- Create a new file called *footer.ejs* inside folder *partials* with the following content:
```javascript
         </div>       
        <script type="text/javascript" src="/javascripts/materialize.js"></script>
      </body>
</html>

```
- Your folder structure will now look like the following:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n8dcxyx94jeznvqrfef3.jpg)

###Step 4: Link *partials* files to EJS files.
Now that we have specified custom CSS and JavaScript files to be used in our app, let's see how it looks like on the app.
- Replace the content of the file *index.ejs* with the following:
```javascript
<% include partials/header %>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>
<% include partials/footer %>
```

###Step 5: New Styling is Now Applied to Our App
- Before:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vu5a0cwdgqmpzdkzmozk.jpg)

- After - MaterializeCSS styling is now applied to our app!
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l1rvn7mt9hf7dfn1ygpt.jpg)

###How Does This Work?
The code works because as we generated the Express app skeleton, some settings have been automatically added for us. 
- Open the file *app.js*. 
- You'll notice the use of the built-in middleware *express.static* on line 20 of the code.
- This is the reason why we store our CSS and JavaScript files inside the folder *public*. 
- It's also the reason why we don't have to explicitly specify the name *public* in our path. 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/93xi489zjtmpbm9twj1g.jpg)
More info about this [here](https://expressjs.com/en/starter/static-files.html).