In this guide, I’ll demonstrate how to get up and running with Pug. Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug is a template engine for Node and for the browser. This can be a nightmare to debug and to maintain. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. This is where the Pug HTML preprocessor comes in. And while this is not the most difficult task, it can often feel a little boring or repetitive. The cache option can also be overriden through Express’s app.disable/ enable('view cache').įor more details, check Express’s API reference.As web designers or developers, we likely all have to write our fair share of HTML. To override the defaults for compileDebug and cache, you can set the respective property in app.locals or res.locals objects to true or false. Specifically, when _ENV is set to 'production', and Pug is used with Express, the compileDebug option is false by default, while the cache option is true. Express and Pug automatically modify the defaults of a few options in production environment, to provide a better out-of-the-box experience for users. In Express, the environmental variable NODE_ENV is designed to inform the web application of the execution environment: whether it is in development or in production. Check out Express’s excellent guide for how to integrate Pug with Express. Pug fully integrates with Express, a popular Node.js web framework, as a supported view engine.

Pug template button