× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

The basics of view templates in an Express.js application

Yuriy Linnyk
Jul 09, 2015
<p>This tip is for a beginner Express.js developer, who want to understand the basic and default setup for view templates in an Express web application.</p> <p>Require the Express module:</p> <pre><code class="language-javascript">var express = require('express'); var path = require('path');</code></pre> <p> </p> <h1>Telling Express where view templates are located</h1> <p>View engine setup:</p> <pre><code class="language-javascript">app.set('views', path.join(__dirname, 'views'));</code></pre> <p>This line tells Express to look for view templates in the <code>views</code> folder.<br>  </p> <blockquote> <p><code>path.join</code> simply concatenates given strings into the absolute path.<br> <code>_dirname</code> is the absolute path of the folder, where the currently executing script is located.</p> <p>Make sure <code>path</code> module is required in the beginning of the script file. It is a core Node module, so it doesn't have to be installed, and is available by default.</p> <pre><code class="language-javascript">var path = require('path');</code></pre> </blockquote> <p> </p> <h1>Telling Express to use Jade</h1> <p>Define which template language should be used:</p> <pre><code class="language-javascript">app.set('view engine', 'jade');</code></pre> <p>That defines <code>jade</code> as the template language. To learn more about Jade, see <a href="http://jade-lang.com/reference/">http://jade-lang.com/reference/</a><br>  </p> <blockquote> <p>Note: make sure Jade module is installed in your web application.<br> Install it with <code>npm install jade --save</code> command.</p> </blockquote> <h1>Rendering template</h1> <p>Later, in route definitions you will use <code>res.render</code> method to render a template with a given name, for example:</p> <pre><code class="language-javascript">app.get('/about', function(req, res) { res.render('about'); });</code></pre> <p>That tells Express to look for <code>views/about.jade</code> template and render it when <code>/render</code> URL is requested.</p> <h1>Jade view</h1> <p>The <code>views/about.jade</code> might look something like this:</p> <pre><code>doctype html html head meta(charset="utf-8") title About body h1 About Us p Automated dedicated software service</code></pre> <p> </p> <h1>Passing variables to the template</h1> <p>You will also be able to pass variable content to templates:</p> <pre><code class="language-javascript">var textFromDb = ""; // actual text could be kept in a database or a config file. app.get('/about', function(req, res) { res.render('about', { text: textFromDb }); });</code></pre> <p>And use the variable in the template:</p> <pre>doctype html html   head   meta(charset="utf-8")   title About   body   h1 About Us   <strong>p= text</strong></pre> <p> </p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus