Base template

Template Inheritance flask


Usually regular sites have parts of the page shared between all pages. It can be header, footer, head block with required page setup information, main menu and auth section. Jinja templating system should help us to implement it.

First of all let's remove standard Angular Page generated for new project. We don't need this nice page anymore. Let's replace it with simple placeholder.

./frontend/src/app/app.component.html
<div>
    <h1>Angular APP</h1>
</div>

In ./templates folder we need to create new file with base template

./backend/templates/_base.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Salesforce Backup Service</title>

    {% block header %}{% endblock %}

</head>
<body>

    <div class="main-wrapper">
        <div class="c-header">
            <h1>Salesforce Backup Service</h1>
        </div>

        <hr />

        <div class="c-body">
            {% block content %}{% endblock %}
        </div>

        <hr />

    </div>

    <footer style="text-align: center;">
        <p>&copy; 2020 - Salesforce Backup Service</p>
    </footer>

</body>
</html>

Here you can see lines:
{% block header %}{% endblock %}
and
{% block content %}{% endblock %}
It is placeholders where we should insert content from others templates.

To make it works we need to modify home.html and login.html templates

./backend/templates/home.html
{% extends "_base.html" %}

{% block header %}
    {% if is_development_mode %}
        <base href="/">
    {% else %}
        {{ resources.head | safe }}
    {% endif %}
{% endblock %}

{% block content %}
    {% if is_development_mode %}
        <div>
            <script>
                console.log('************************************');
                console.log('************************************');
                console.log('         DEVELOPMENT MODE');
                console.log('************************************');
                console.log('************************************');
            </script>
            <div style="position: fixed; top: 0; right: 0; background-color: #ef4646; color: #fff; padding: 0 7px; z-index: 99999;">DEVELOPMENT MODE</div>
        </div>
        <app-root></app-root>
        <script src="https://localhost:4200/runtime.js" type="module"></script>
        <script src="https://localhost:4200/polyfills.js" type="module"></script>
        <script src="https://localhost:4200/styles.js" type="module"></script>
        <script src="https://localhost:4200/vendor.js" type="module"></script>
        <script src="https://localhost:4200/main.js" type="module"></script>
    {% else %}
        <h2>PRODUCTION MODE</h2>
        <app-root></app-root>
        {{ resources.scripts | safe }}
    {% endif %}
{% endblock %}


./backend/templates/auth/login.html
{% extends "_base.html" %}

{% block content %}
<div>
    <h3>Login</h3>
    <div>
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}
                </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="">
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Your Email" />
            </div>

            <div>
                <label>Password</label>
                <input type="password" name="password" placeholder="Your Password" />
            </div>

            <div>
                <label class="checkbox">
                    <input type="checkbox">
                    Remember me
                </label>
            </div>

            <button>Login</button>

        </form>
    </div>
</div>
{% endblock %}

The main pages structure remains the same instead of few new Jinja2 tags: extends and block
More about Jinja2 Templating System you can read here
https://jinja.palletsprojects.com/en/2.11.x/templates/#template-inheritance


Angular App inside Flask Jinja2 Base template





Comments

Post a Comment

Popular posts from this blog

HTTPS in local environment for Angular + Flask project.

Image
Sometimes it is important to run project in local environment with HTTPS. For example when you use third party authentication system in our app. In my case I prefer to have local instance similar as mush as possible to the production. Moreover, it’s easy to implement. First what you need is the ssl key. You can follow this article to create it https://devcenter.heroku.com/articles/ssl-certificate-self Create your ssl key in ./key project folder. Finally it should look like this [dmnbrest@~/Documents/myPython/blog2/project/key]$ ls server.crt server.csr server.key Add HTTPS support to the FLASK: Update init section in your backend server file ( ./backend/app.py ) this way if __name__ == "__main__":     context = ('./key/server.crt', './key/server.key')     app.run(ssl_context=context, host='0.0.0.0', debug=True) But now we need to run backend with other command python ./backend/app.py This time you should see this output in ...
Read more

Task schedule configuration (Cron-like)

Image
I've rethink schedule run flow and decide to focus on Cron like style. User can still select from simple options like 10 mins, 1 hour, 1 day but they will be stored in Cron format. I found great python lib to simplify this work - Croniter ( https://github.com/kiorky/croniter ). It allows us to validate cron expression and calculate next run time. In scheduler we will check next run time and start task processing if time is less or equal and task status is "waiting". ./backend/controllers/task.py ... @task_bp.route('/start', methods=['POST']) @login_required def start_tasks(): task_payload = request.get_json() task = Task.query.filter(Task.id == task_payload['id'], Task.user_id == current_user.id).first_or_404() if not task.config or not croniter.is_valid(task.config['trigger_value']) : abort(400, 'Invalid Trigger Setup') task.status = 'waiting' base = datetime.now...
Read more

Salesforce Lightning Design System (SLDS)

Image
At this moment our UI looks ugly without any styles. To make it looks better we can to use any of existing CSS frameworks. I tried Bootstrap ( https://getbootstrap.com/ ), Foundation ( https://get.foundation/ ), UIkit ( https://getuikit.com/ ). But as a Salesforce developer I found SLDS ( https://www.lightningdesignsystem.com/ ) is closer to my heart. Let's add it to our project. Download last SLDS (current version is 2.11.6) from https://www.lightningdesignsystem.com/downloads/ Extract it to the ./backend/static/slds folder. There are few other ways to add SLDS to the project: - from NPM in the Angular subproject. But in this case it can be accessible by Angular only and is compiled as part of the result bundle. But we have Flask project as global playground and few pages (like /auth/login) should work out of the angular context but have the same look. - external CDN (like  https://cdnjs.com/ ). I like this approach and use it often during development time, but ...
Read more