I’m TUAN, currently a Full-stack Developer in Tokyo.
If you find this Blog interesting, please give me a like and subscribe to support me.
Using Template Engines with Express
The Template engine allows you to use static Template files in your application. While the application runs, the Template engine replaces the variables in the Template file with actual value and converts the Template into an HTML file that is sent to the Client . This approach makes it easier to design an HTML page.
Some popular Template engines that work with Express are Pug , Mustache , and EJS . Express application generator uses Jade as default, but it also supports a number of other applications.
See the Template Engines list (Express wiki) for a list of Template engines that you can use with Express . See also Compare JavaScript Template Engines: Jade, Mustache, Dust and more… .
Note : Jade has been renamed Pug . You can continue to use Jade in your application and it will work fine. However, if you want the latest update for the Template engine , you must replace Jade with Pug.
To display the Template file, set the following Application Setting Properties , set in the default app.js generated by the generator:
views, the folder containing the Template files. Ex:app.set('views', './views'). This defaults to theviewsfolder in the root of the application.view engine, Template engine to use. For example:app.set('view engine', 'pug')to use the Pug Template engine .
Then install the corresponding npm Template engine package; example to install Pug:
1 2 | $ npm install pug --save |
Fast compliant Template engines like
JadeandPugexport a function named__express(filePath, options, callback), which is called by theres.render()function to render the Template .Some Template engines do not follow this convention. The Consolidate.js library follows this convention by mapping all the popular Node.js Template engines and thus works seamlessly in Express.
Once the view engine is set, you do not have to specify the engine or load the Template engine module in your application; Express loads the module internally, as shown below (for the example above).
1 2 | app <span class="token punctuation">.</span> <span class="token function">set</span> <span class="token punctuation">(</span> <span class="token string">'view engine'</span> <span class="token punctuation">,</span> <span class="token string">'pug'</span> <span class="token punctuation">)</span> |
Create a Template Pug file named index.pug in the views folder, with the following content:
1 2 3 4 5 6 | html head title <span class="token operator">=</span> title body h1 <span class="token operator">=</span> message |
Then create a Route to display the index.pug file. If the view engine property is not set, you must specify the extension of the view . If not, you can skip it.
1 2 3 4 | app <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">req <span class="token punctuation">,</span> res</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> res <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token string">'index'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> title <span class="token operator">:</span> <span class="token string">'Hey'</span> <span class="token punctuation">,</span> message <span class="token operator">:</span> <span class="token string">'Hello there!'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
When you request to '/' , the index.pug file will be displayed as HTML .
Note: The view engine cache does not cache the content of the output of the Template , only the underlying Template itself. The view is still re-rendered with every request even with cache enabled.
To learn more about how the Template engine works in Express , see: “Developing template engines for Express” .
Roundup
As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next posts!
If you find this blog interesting, please give me a like and subscribe to support me. Thank you.