This tutorial assumes the use of EJS as the view template engine of your Express app.
In this example, we're going to use MaterializeCSS to beautify our app.
- Once downloaded, extract the files into the folder public in your app.
- The file 'materialize.css' will go into folder public/stylesheets.
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:
<!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:
- Your folder structure will now look like the following:
- Replace the content of the file index.ejs with the following:
<% include partials/header %> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html> <% include partials/footer %>
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.
- It's also the reason why we don't have to explicitly specify the name public in our path. More info about this here.