{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/how-to-set-up-templating-engines-with-express/",
    "result": {"data":{"markdownRemark":{"html":"<p>Templating engines are also referred to as view engines by Express.</p>\n<p>There are two parts to setting up a templating engine in Express.</p>\n<p>First, set the <del>views</del> value to specify the folder where the templates will be stored.</p>\n<p>Second, set the <del>view engine</del> value to specify the template library.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// This defaults to the &#39;views&#39; folder in the project root directory.</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">set</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;views&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk3\">path</span><span class=\"mtk1\">.</span><span class=\"mtk6\">join</span><span class=\"mtk1\">(</span><span class=\"mtk3\">__dirname</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;views&quot;</span><span class=\"mtk1\">))</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// setting up the &#39;pug&#39; templating engine</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">set</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;view engine&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;pug&quot;</span><span class=\"mtk1\">)</span></span></span></code></pre>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"How to Set Up Templating Engines With Express?","date":"2021-06-01"}}},"pageContext":{"slug":"/how-to-set-up-templating-engines-with-express/","prev":{"fields":{"slug":"/how-to-remove-try-catch-statements-in-async-route-handler-functions/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/modelling-relationships-in-mongoose-using-reference/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}