Flask app demo

flask_h5_.idea_flask_h5.iml

<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$" />
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

flask_h5_.idea_inspectionProfiles_profiles_settings.xml

<component name="InspectionProjectProfileManager">
  <settings>
    <option name="USE_PROJECT_PROFILE" value="false" />
    <version value="1.0" />
  </settings>
</component>

flask_h5_.idea_misc.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectRootManager" version="2" project-jdk-name="Pipenv (flask_h5)" project-jdk-type="Python SDK" />
  <component name="PyCharmProfessionalAdvertiser">
    <option name="shown" value="true" />
  </component>
</project>

flask_h5_.idea_modules.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/flask_h5.iml" filepath="$PROJECT_DIR$/.idea/flask_h5.iml" />
    </modules>
  </component>
</project>

flask_h5_.idea_workspace.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ChangeListManager">
    <list default="true" id="f9989f19-03b0-4c60-91a8-52a61b3c6eea" name="Default Changelist" comment="" />
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
    <option name="LAST_RESOLUTION" value="IGNORE" />
  </component>
  <component name="FileTemplateManagerImpl">
    <option name="RECENT_TEMPLATES">
      <list>
        <option value="Python Script" />
        <option value="HTML File" />
      </list>
    </option>
  </component>
  <component name="ProjectId" id="1aUYUCUPOXzI9ygTmgwTXQpAyJn" />
  <component name="ProjectViewState">
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showExcludedFiles" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
  <component name="PropertiesComponent">
    <property name="DefaultHtmlFileTemplate" value="HTML File" />
    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
    <property name="settings.editor.selected.configurable" value="settings.github" />
  </component>
  <component name="SvnConfiguration">
    <configuration />
  </component>
  <component name="TaskManager">
    <task active="true" id="Default" summary="Default task">
      <changelist id="f9989f19-03b0-4c60-91a8-52a61b3c6eea" name="Default Changelist" comment="" />
      <created>1586791652557</created>
      <option name="number" value="Default" />
      <option name="presentableId" value="Default" />
      <updated>1586791652557</updated>
    </task>
    <servers />
  </component>
  <component name="WindowStateProjectService">
    <state x="137" y="23" key="#com.intellij.execution.impl.EditConfigurationsDialog" timestamp="1586797424183">
      <screen x="0" y="0" width="1366" height="728" />
    </state>
    <state x="137" y="23" key="#com.intellij.execution.impl.EditConfigurationsDialog/0.0.1366.728@0.0.1366.728" timestamp="1586797424183" />
    <state x="442" y="175" key="#com.intellij.fileTypes.FileTypeChooser" timestamp="1586792091380">
      <screen x="0" y="0" width="1366" height="728" />
    </state>
    <state x="442" y="175" key="#com.intellij.fileTypes.FileTypeChooser/0.0.1366.728@0.0.1366.728" timestamp="1586792091380" />
    <state x="521" y="266" width="347" height="195" key="Github.CreateGistDialog" timestamp="1586798691442">
      <screen x="0" y="0" width="1366" height="728" />
    </state>
    <state x="521" y="266" width="347" height="195" key="Github.CreateGistDialog/0.0.1366.728@0.0.1366.728" timestamp="1586798691442" />
    <state x="186" y="10" key="SettingsEditor" timestamp="1586798735804">
      <screen x="0" y="0" width="1366" height="728" />
    </state>
    <state x="186" y="10" key="SettingsEditor/0.0.1366.728@0.0.1366.728" timestamp="1586798735804" />
  </component>
</project>

flask_h5_app.py

from app import app

if __name__=='__main__':
    app.run(debug=True)

flask_h5_app___init__.py

from flask import Flask
import os

app=Flask(__name__,static_folder='static')
app.config['SECRET_KEY']='blablabla'

APP_ROOT=os.path.dirname(os.path.abspath(__file__))

from app import routes

flask_h5_app_routes.py

from flask import render_template

from app import app,APP_ROOT

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

@app.route('/about')
def about():
    return render_template('about.html',title='About',name='Passed by variable')

flask_h5_app_templates_about.html

{% extends 'layout.html' %}
{% block ourpage %}

<div class="card">
	<div class="card-body">
		<h4 class="card-title">About Us</h4>
		<p class="card-text">We are Engineers</p>
		<p> {{ name }} </p>
	</div>
</div>>

{% endblock %}

flask_h5_app_templates_index.html

{% extends 'layout.html' %}
{% block ourpage %}

	<h1 class="display-1">Hello! Welcome to our page</h1>

{% endblock %}

flask_h5_app_templates_layout.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{title}}</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Flak APP</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	  <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('about') }}">About</a>
      </li>

    </ul>
  </div>
</nav>

	{% block ourpage %}
	{% endblock %}
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

flask_h5_Pipfile

[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]

[requires]
python_version = "3.7"