Views in Express.js

Create a New Project Directory

Create a package.json File

Configure the Project as an ES Module Application

Install Express

Types of Views in Express.js

What Are Static Views in Express.js?

Create static views

index.html (homepage)

about.html (about page)

contact.html (contact page)

404.html (error page)

Configure a web server to serve static views

Run your Express.js application

Create a directory for static views

Move all static views into the public folder

Update the server to retrieve static views from the public folder

What Are Dynamic Views in Express.js?

What is EJS?

What are EJS template tags?

Types of EJS template tags

Closing tag (%>)

Scriptlet tag (<%)

Escaped output tag (<%=)

Unescaped output tag (<%-)

Literal opening tag (<%%)

Newline-trimmed ending tag (-%>)

Whitespace slurp opening tag (<%_)

Whitespace slurp closing tag (_%>)

Comment tag (<%#)

How to use EJS in an Express project

Install EJS

Configure a web server to serve dynamic views

Run the Express app

Create a directory for view templates

Create an index view template

Update the server to retrieve view templates from the views folder

How to create reusable EJS templates (partials)

Syntax of the include() method

How to include a partial in a view template

Create a partials directory

Create a partial view template

Update the main view template

Run your server from the root directory