Building MVP with React Flask Full Stack – Day 2 – Templates basics

Today, I want to learn Flask templating system basics.

In the past, I was afraid of learning new frameworks.

Mostly because reading any documentation related to said framework was followed by a huge headache.

On one such occasion, I was halfway through step by step guide on how to use Flask / Django templating system, while suddenly I got a serious headache.

In order to relieve the pain, I immediately closed the guide, turned on youtube and never attempted to learn templating system again.

Until now.

Instead of taking action, I procrastinated and daydreamed about how my webpage would look like in Flask / Django.

That has to stop.

Today, I want to at least lay down the basic infrastructure for my homepage.

Homepage is my favourite starting point in every web development project.

Not a lot of imagination is required and you always start with same boilerplate code.

Every homepage on the planet share the same layout structure.

Why?

Because users are so used to well known design patterns, that when you start experimenting with crazy ideas, you might go viral, but they will never visit your web again.

Users are consumers and consuming content on a page with e.g. randomly moving menus following your cursor is just plainly uncomfortable.

Git Repository

 

Okay.

With a goal in mind, let’s first backup our codebase into some Git cloud service.

I totally forgot this step at the beginning.

It’s usually the first thing you should do after creating your project folder.

I am using free Gitlab account for backup and free mac Git client GitKraken for committing to Git repository.

If you are afraid of using command line like me, you will find both tools to be really non-developer friendly.

Creating a new repo in GitKraken and syncing with Gitlab still confuses me as there are so many options.

Should i create repo locally and sync to cloud, create repo on cloud and clone to local or create repo locally and sync to self-hosted Gitlab?

After few trials and errors i figured out the necessary steps:

  • In Gitkraken, click on View all repositories

  • Choose Init – Local repository
  • Fill form and click on Create Repository

  • On left sidebar click on REMOTE
  • Choose URL option
  • Fill in the url of your project on Gitlab

And. It’s done.

Creating Index.html

 

So far, our page displays a string, that is rendered by Flask view.

What I want to achieve is to create a header.

In order to do that, I need a way to start adding html tags.

If this would be a Html5 project, i would just create an index.html file, which would contain basic html web page elements like header, body and footer.

Luckily, Flask allows us to create and render html files.

Not only that, it allows us to break down html page into smaller reusable pieces.

And thanks to template system called Jinja2, we can enrich static html content with dynamically generated content by using variables, if statements and for loops.

Anyway, how do we add html template to our Flask view?

Before I dig into that, I want to refactor the code according to this guide.

You will see why.

Create an app folder inside our project folder like so.

/financia/app/

At the beginning, we had all our files inside our main project folder.

This will be a mess further down the road.

What if I want to add 100 images? The folder would then contain more than 100 files.

It’s better to categorise files into separate folders, that serves their own purpose.

The new app folder will contain will therefore contain only app related code.

In the folder, create a __init__.py file.

from flask import Flask

app = Flask(__name__)

from app import routes

This is just a file, that kickstarts our application and display whatever content we define with our routes.

Next, create a routes.py file inside our app folder.

Then cut and paste hello world view into routes.py.

from app import app

@app.route('/')
def index():
    return "Hello, World!”

Again, we just copied previously defined view, that renders simple string “Hello World” whenever a user visits our main domain url.

Now rename app.py into financia.py and code below inside.

from app import app

I just abstracted our app into more layers and files.

Before, I had single app.py file, that did everything.

Now, I just call financia.app, that calls our app.py, that calls routes, that needs to be rendered.

Okay, let’s see if refactoring works.

Close and start Gunicorn again.

gunicorn financia:app

Yep. it still works.

 

Since I didn’t break anything with refactoring, I can finally create base index.html page template.

I will store all template files inside conveniently named folder called app/templates.

mkdir templates

Next, create index.html file and fill it with basic html layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }} - Financia</title>
</head>
<body>
    <h1>Hello, {{ user.username }}!</h1>
</body>
</html>

Now I need to tell Flask to render index.html page whenever user visits our main url.

It can be done by using render_template() function in our Flask view.

from app import app
from flask import render_template
@app.route('/')
def index():
    return render_template('index.html', title='Home')

That’s it. Restart Gunicorn and reload our app in Chrome.

Yep, works as usual.

Today, I did a proof of concept, that Flask templating system works.

I didn’t manage to integrate Bootstrap 4 as I intended to do, but I hope I will get it done in the next session.

After that, i can finally focus on designing layout elements with html and css.

See ya.

Share it!


Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Leave a Reply

avatar

Want to support me in my journey 🚀? You can send me a donation below 👇.

Donate with Paypal

Made with 🔥 by Viet Phan 2018