CODEWITHSUNDEEP
node.jsdjangoexpress
Surya M N
Surya M N

Reputation: 45

Base template for Node.js and Express similar to Django

In Django there is a really useful tool i.e, using base template for stuff like navbar which makes it really fast for development and also avoids a lot of redundant code since we can neglect including stuff like navbar each time in different pages of a web-app. Also if there is any change to make in navbar, I need not have to change it everywhere but base template. I want to know if there is a similar functionality for Node.js + Express.

Upvotes: 2

Views: 1339

Answers (2)

Ameri
Ameri

Reputation: 21

nunjucks is more similar. https://mozilla.github.io/nunjucks/

ex)

{% extends "base.html" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
 {% endfor %}
</ul>
{% endblock %}

Upvotes: 1

kavigun
kavigun

Reputation: 2365

Frontend frameworks like Angular acts as our templating engines. If you are not using any frontend frameworks as angular/react, you can go for template engines like EJS with node.js/express.js and is very easy to set up as well. You may create and include your repeatable parts of your site like header, menu section, sidebar, main body section, or footer, etc,.

For example, the following document/main index page located at "views/pages/index.ejs" includes a head section located at "partials/head.ejs" in the head tag of "views/pages/index.ejs" likewise header and footer section is also included.

<!-- views/pages/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body class="container">

<header>
    <% include ../partials/header %>
</header>

<main>
    <div class="jumbotron">
        <h1>This is great</h1>
        <p>Welcome to templating using EJS</p>
    </div>
</main>

<footer>
    <% include ../partials/footer %>
</footer>

</body>
</html>

You can create such redundant custom templates and use them wherever required. Hope this answer helps!

Upvotes: 2

Related Questions