Author: John Au-Yeung

Sometimes, we want to fix Python Flask app not picking up .css file.

In this article, we’ll look at how to fix Python Flask app not picking up .css file.

How to fix Python Flask app not picking up .css file?

To fix Python Flask app not picking up .css file, we should set up the static file folder for our Flask app.

We put the CSS file in the /static/styles folder in our Flask project folder.

Then we add the link tag for the CSS file by writing

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

We set the href attribute to {{ url_for('static',filename='styles/mainpage.css') }}.

to reference the mainpage.css file with the link tag.

Conclusion

To fix Python Flask app not picking up .css file, we should set up the static file folder for our Flask app.

We put the CSS file in the /static/styles folder in our Flask project folder.

To call a Python Flask function on button click event, we can navigate to the view when the button is clicked.

For instance, we write

<form action="/forward/" method="post">
  <button name="forwardBtn" type="submit">Forward</button>
</form>

to add a button that navigates to the URL for the /forward/ route when we click on the Forward button.

The form is subbmitted when we click on the button.

Then we define the /forward/ route with the move_forward function by writing

from flask import Flask, render_template, Response, request, redirect, url_for

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/forward/", methods=["POST"])
def move_forward():
    forward_message = "Moving Forward..."
    return render_template("index.html", forward_message=forward_message)

It calls render_template to render index.html with the forward_message variable set to "Moving Forward...".

Sometimes, we want to send data from a textbox into Python Flask.

In this article, we’ll look at how to send data from a textbox into Python Flask.

How to send data from a textbox into Python Flask?

To send data from a textbox into Python Flask, we can get the form values from request.form in our view.

For instance, we write

<form method="POST">
    <input name="text">
    <input type="submit">
</form>

to add a form into the templates/my-form.html file.

Then in our app’s code, we write

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def my_form():
    return render_template('my-form.html')

@app.route('/', methods=['POST'])
def my_form_post():
    text = request.form['text']
    processed_text = text.upper()
    return processed_text

to render templates/my-form.html within the my_form route.

And we get the form values from request.form in the my_form_post route.

We get the input with the name attribute text by using request.form['text'].

Conclusion

To send data from a textbox into Python Flask, we can get the form values from request.form in our view.

Sometimes, we want to get Python Flask to run on port 80.

In this article, we’ll look at how to get Python Flask to run on port 80.

How to get Python Flask to run on port 80?

To get Python Flask to run on port 80, we can call app.run with the port argument.

For instance, we write

if __name__ == '__main__':
      app.run(host='0.0.0.0', port=80)

to call app.run with the port argument set to 80 to run our Flask app on port 80.

Conclusion

To get Python Flask to run on port 80, we can call app.run with the port argument.

Sometimes, we want to auto reload Python Flask app upon code changes.

In this article, we’ll look at how to auto reload Python Flask app upon code changes.

How to auto reload Python Flask app upon code changes?

To auto reload Python Flask app upon code changes, we can enable debug mode.

To do this, we write

app.run(debug=True)

to call app.run with the debug argument set to True.

Also, from the shell, we can run

$ export FLASK_DEBUG=1
$ flask run

to set the FLASK_DEBUG environment variable to 1 to enable debug mode.

And then we run flask run to start the app.

Conclusion

To auto reload Python Flask app upon code changes, we can enable debug mode.