templates/index.html
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Say Hello</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> </head> <body> <img src="https://raw.githubusercontent.com/MariyaSha/SimpleGreetingApp/main/logo.png"> <br> <form action="greet" method="post"> <!-- <p>What's your name?</p> --> {% for message in get_flashed_messages() %} <p> {{message}} </p> {% endfor %} <br> <input type="text" name="name_input"> <br> <input type="submit" value="GREET" id="greet"> </form> </body> </html>
hello.py
hello.py
from flask import Flask, render_template
app = Flask(__name__) @app.route('/') def index(): return 'Index Page' @app.route('/hello/') @app.route('/hello/<name>') def hello(name=None): # return "<p>Hello, World!</p>" return render_template('hello.html', person=name) if __name__ == '__main__': app.run(debug=True)
static/main.css
main.css
body { background-color: slategray; text-align: center; } p { color: white; font-family: Shanti; font-size: 1.2em; margin: 20px; } img { margin: 60px 0 30px 0; width: 250px; } input { width: 300px; height: 50px; margin: 20px; border: none; border-radius: 10px; font-family: Shanti; text-align: center; font-size: 1.3em; } input:focus { border: solid 5px #00FFCE; outline: none; } #greet { background-color: palevioletred; color: white; width: 200px; } #greet:hover { background-color: mediumvioletred;; cursor: pointer; }
- Run app
export FLASK_APP=app.py
flask runAccess html template through flask rather than filestystem
http://127.0.0.1:5000/
Prepare Flask app for deployment (Heroku)
pip install gunicorn
nano Procfile
web: gunicorn app:app- Generate a list of installed Python packages
pip freeze > requirements.txt
- fix: MarkupSafe ==2.0.1