Step-by-Step: Creating a Flask app and Deploying it to Heroku
WARNING ⚠️ Per deprecation notice and blog post, deploying to Heroku fo free doesn’t work anymore. ⚠️
Flask is a simple (“micro”) web framework in Python. You can use it to easily create a website or application.
Heroku, on the other hand, is a cloud application platform. Once your Flask app is ready, you can easily (and, most importantly, for free) deploy it to Heroku so it can live on the web.
In this article we’ll focus on developing an example Flask app and then deploy it to Heroku.
Step 1: Check you’ve already PIP installed the Packages
For this project, we’ll only need to install Flask.
$ pip install FlaskAlso, we’ll need to know high-level HTML and CSS. If you’d like a short review of HTML and CSS, I recommend: Learn HTML and CSS in 12 minutes.
Step 2: Download the Flask template and Check that it Runs Locally
First, let’s download this Flask template to your Desktop or Documents folder. Once you go to that link, click the green “Code” button. If you already have a GitHub account, you can download the code by cloning it to your own repository (repo). If you don’t have an account, you can simply Download ZIP (just make sure you unzip it too).
After that, let’s open our terminal, cd to our project, and run it locally by running the three commands below. For example, if I saved my project on the Desktop, I’d run:
$ cd ~/Desktop
$ cd flask-template-main
$ python3 main.pyOnce you run “python3 main.py” the output should look something like this:
* Serving Flask app "main" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with fsevents reloader
* Debugger is active!
* Debugger PIN: 100-544-784In our case, the piece that we’re interested in is “http://127.0.0.1:5000/” so copy and paste that into your browser and up should pop the Flask site!
You can now see that your Flask app is running locally! Feel free to play around with the app. When you’re done, make sure to hold down control + c in the terminal to stop the app.
Step 3: Review code
Now that we saw our site running locally, let’s go back to the online template and walkthrough our code and file structure to learn more about our app.
First, let’s review main.py (also shown below). We first import the Flask library, including the render_template method. Next, we create an instance of the Flask app. Then, we create the routes for the app. Finally, we actually run the app.
Let’s go back to routes for a second because they are important. Essentially, routes assign URLs and render the HTML file to our app. For example, app.route(“/about”) executes the about() function, which returns and renders the about.html file.
Note: It’s good practice to name the route, the function, and the html file the same.
from flask import Flask, render_template
app = Flask(__name__) ### Web Pages ###
@app.route("/")
def home():
return render_template("home.html") @app.route("/about")
def about():
return render_template("about.html") if __name__ == '__main__':
app.run(debug=True)
Second, let’s review the templates folder. First thing to remember: Keep the templates folder named “templates.” Flask will look for this templates folder automatically and Flask will throw an error if it can’t find it.
The templates folder stores your HTML files. Pretty self-explanatory.
Before moving on, I want to call out the inheritance (extends) and block content you’ll find in our HTML files:
- One of the general ideas of programming is to not duplicate effort. In our situation, the header-footer.html file extends to (or is inherited to) the home.html and about.html because the header and footer should remain consistent no matter what page the user is on.
So yes, I could simply copy and paste the header and footer pieces into the home.html and about.html files, but if I update the header and footer (we’ll do this in Step 5), I’ll need to make changes in many files as opposed to just one file.
Lastly, let’s review the static folder. Put simply, the static folder stores your css, images, and javascript files.
Step 4: Set Up and Deploy to Heroku
Now that we saw our site running locally and reviewed the code, let’s deploy our app to Heroku (don’t worry, it’s free!).
To deploy our app, we’ll first need to install Git and install the Heroku CLI (and sign up for Heroku). After installing Git and Heroku, let’s cd to our project’s home directory. For example, if your project is on your Desktop, you’d run:
$ cd ~/Desktop/flask-templateNext, we need to create 3 files in our project’s home directory for Heroku to run: 1. Procfile (specifies the command the app will execute on startup), 2. runtime.txt (specifies which Python version to run), and 3. requirements.txt (your Python dependencies go in here).
Procfile and runtime.txt are pretty easy to make. From your project’s home directory in your terminal, run:
$ touch runtime.txt && echo "python-3.6.11" >> runtime.txt
$ touch Procfile && echo "web: gunicorn main:app" >> ProcfileYou should now see runtime.txt and Procfile in your project’s home directory.
For requirements.txt, install pipreqs. Then in your project’s home directory run:
$ pipreqs ~/Desktop/flask-template
$ touch requirements.txt && echo "gunicorn==20.0.4" >> requirements.txtYou should now see requirements.txt in your project’s home directory.
Then, let’s commit our changes by running:
$ cd ~/Desktop/flask-template
$ git init
$ git add .
$ git commit -m 'My first commit'Finally, let’s create the Heroku app (firstlast-myfirstapp will be your website’s URL, so feel free to change it to whatever you’d like!) by running:
$ heroku create firstlast-myfirstapp
$ git push heroku HEAD:masterAnd there you have it! One of the final lines of output should read “https://firstlast-myfirstapp.herokuapp.com/ deployed to Heroku”. This means you can access it publicly. Mine is here: https://danblevins-myfirstapp.herokuapp.com/
Step 5: Make Code Changes Locally and Re-deploy
Now that we’ve deployed our app, let’s learn how to make edits and update the changes.
In our code, let’s update the footer in the header-footer.html file.
Replace the below href and the corresponding text and save the file:
<footer>
<div class="footer">
<p>Created by: <a href="#Your-LinkedIn-URL">Your Name</a></p>
</div>
</footer>For example, I’d update the footer to be:
<footer>
<div class="footer">
<p>Created by: <a href="https://www.linkedin.com/in/dan-blevins/">Dan Blevins</a></p>
</div>
</footer>Finally, let’s commit these changes and push the updates to Heroku by running:
$ cd ~/Desktop/flask-template
$ git init
$ git add .
$ git commit -m 'My first commit'
$ git push heroku HEAD:masterYou should now see the update footer on your live Heroku website!
Your Turn to Explore More!
- Brainstorm other Flask app ideas! Such as: A weather app, A portfolio website, or a feedback form.
- Design better with css flex-box.
- Include machine learning as part of your app.
Thanks for reading! Feel free to comment and let me know if you want a YouTube tutorial.
Want to stay in touch? Connect with me on LinkedIn!
