Objectives
Learn how to integrate Pug with Express.js by creating a simple multi-page app.
Tech Stack
What is Pug?
Integrating with express.js
Sample Usage
Let's dive right in! This blog post will illustrate how to create a straightforward multi-page app using Express and Pug. I assume that you have a basic understanding of using Node.js and JavaScript, so I won't go through the environment setup process.
Let's take a look at the project structure first. We have a folder called views, which contains all the Pug files. We also have a folder called public, which contains all the static files such as images, and CSS files. Last but not least, the app.js file is the entry point of this application.
App.js
First, we import the express module and create an instance of the express application. Then, we set the view engine to Pug. This tells Express to use Pug as the template engine. Next, we set the views directory to the views folder. This tells Express where to find the Pug files. Finally, we set the static directory to the public folder. This tells Express where to find the static files.
Layout.pug
In the views folder, we create a layout.pug file. This file will be the base template for all the pages. It contains the basic HTML structure with the head and body tags. The head tag contains the title or link to CSS files. The body tag contains the header and the content block. The content block will be replaced by the content of each page in next step.
Next, we create a home.pug file. This file will be the home page of the application. It extends the layout.pug file and replaces the content block with the content of the home page.
We create a about.pug file. This file will be the about page of the application. It extends the layout.pug file and replaces the content block with the content of the about page too.
After creating all the Pug files, we can add the route handlers to the app.js file. We create a route handler for the home page and the about page. The route handler for the home page renders the home.pug file. The route handler for the about page renders the about.pug file:)
Let's take a look at the browser
Now, we can start the server. We can see that the home page and the about page are rendered correctly. Isn't it cool?
Home page
About page
Passing data from your Express.js routes
To make the Pug files more dynamic, we can pass data from the route handlers to the Pug files. Let's take a look at an example. We create a product route handler. The route handler passes an object to the product.pug file. The object contains the name, the price and the description of the product.
The product.pug file renders the page using the object passed from the route handler. It uses the Pug syntax to create a dynamic view.
Let's take a look at the browser. We can see that the product page is all set up!
Implement Logic
We can also use the Pug syntax to implement logic. Let's take a look at another example. We create a profile route handler. The route handler passes an object to the profile.pug file. The object contains the name, the age and the isAdmin property of the user.
The profile.pug file renders the page using the object passed from the route handler. It uses the Pug syntax to implement logic. If the user is an admin, it will display the admin message. Otherwise, it will display the normal message.
Let's take a look at the browser. We can see that the profile page renders the correct message. I am the admin of the website 🙈.
That's it! Pug helps us to implement logic in a really elegant way!
Conclusion
In this blog post, I illustrated how to create a simple multi-page app using Express and Pug. I also show how to pass data from the Express.js routes to the Pug files and how to use Pug syntax to implement logic. I hope you find this blog post useful. If you want to learn more about Pug, check out the official Pug doc here. See you next time!
Source