How to deploy Flask app on Heroku using GitHub

Automatically deploy changes on Heroku using GitHub

How to deploy Flask app on Heroku using GitHub

Flask is one of the most popular frameworks for web development when it comes to python. It is small and lightweight, providing valuable tools and features that make web development in python easier. If you're a beginner, try flask as it's flexible and more accessible for newbies. here you can create a web app using only a single python file. In this article, we will deploy a simple flask app on Heroku using GitHub.

Prerequisites :

  • Python
  • Git
  • Pip
  • VSCode (You can use any code editor of your choice)

Creating a Simple Flask App

Open a folder in your favorite code editor and create a virtual environment using pip in terminal using the command written below. Once the virtual environment setup is completed now we have to activate it using a script. Before executing the activation script make sure you're in the folder that contains the virtual environment you just created.

Windows

python -m venv <name_for_virtualenv>
<name_for_virtualenv>\Scripts\Activate.ps1

Linux/MacOs

python3 -m venv <name_for_virtualenv>
source  <name_for_virtualenv>/bin/activate

Now you can see (name_for_virtualenv). if you don't see this then your venv is not activated. Once the virtual environment is activated now we will install the necessary python packages for our Flask app. we will need to install Flask and Gunicorn engine. Gunicorn is a Python HTTP server for WSGI applications.

pip install flask gunicorn

You can check the list of python packages installed in the virtual environment using a code i.e.

pip list

You will see a list of packages installed in your virtual environment. pip and setuptools are the base packages that are default in a new virtual environment. Other packages include flask, gunicorn, and some other lists that are by default installed with flask.

Flask App

Now you're ready to start with your flask app. Create a file i.e. main.py and paste the following code

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home_view():
        return "<h1>My Flask App</h1>"

if __name__ == "__main__":
  app.run()

Now create a file with the name Procfile and make sure the Procfile has no extension and paste the following code

web: gunicorn main:app

Your flask app is ready to deploy. you can check your flask app by running a command in the terminal i.e.

python main.py

you will see an address of localhost where your site is currently running. You can check it in your browser. Paste the LocalHost URL in the browser.

flask.PNG flask in browser.PNG

Now we will create a text file for all the necessary python package names and versions that we'll need on our server. We don't need to write these names manually we'll do it using a built-in command i.e.

pip freeze>requirements.txt

This will create a file of name requirements with all the packages and their versions. below is the list of packages.

requirements.PNG

Setting Up GitHub Repository

Now create a new GitHub repository with an appropriate name. github.PNG After you created an empty repository you will get a page

flasl.PNG On this page, all the necessary commands are already provided you can use these commands to push your code to GitHub. First Open your terminal in the project's directory and write the following commands step by step to upload your project to GitHub. Before writing these commands make sure you have installed git in your operating system

Initialize your Folder to the Repository:

git init

Add gitignore file

Now add gitignore to ignore the virtual environment folder because we don't need to upload it. Create a file using the name .gitignore in the project's directory. Add the folders that need to be ignored we're ignoring environment directed so write env/ in the .gitignore file.

Add file to Git

git add .

Use the above command to add all the files to git

Add comment

git commit -m "message here"

the above comment will set a message to the commit so it will be easy for backtracking. Make sure the comment describes your changes.

Change Branch to main

git branch -M main

The above command is one time you don't need to write this command on every change. When you initialize a directory the default branch is master so we need to change it to the appropriate one.

Linked to GitHub

git remote add origin https://github.com/<username>/<repository-name>.git

The above command is also one-time. This command is used to link your local repository to the GitHub repository. You can find this link in your GitHub repository.

flasl.PNG

Push to GitHub

git push -u origin main

The above command is used to upload your code to GitHub. After successfully uploading refresh the GitHub page to see your files on your repository.

Deploy on Heroku

Login/Signup to your Heroku account. Once you have logged in to your Heroku Account you will find a button with text new. Click on the button you will get a dropdown menu. In the dropdown menu click on create a new app. then provide the appropriate name for your app and click on 'create app'.

flaskcreateapp.PNG createapp.PNG

when you have created the app you'll redirect toward the main dashboard. From Dashboard click on connect to GitHub. appdashboard.PNG Then a Menu will appear where you can search for the repository you want to deploy on Heroku. connectGithub.PNG Now select Enable Automatic Deploys and click on deploy branch to deploy your project. deploy branch.PNG After successful deployment, a message will show i.e. "Your app was successfully deployed". Now you can see your site online by clicking on the open app button at top of the dashboard.

Congratulations you have successfully deployed your app on Heroku. whenever you push a change on GitHub Heroku will automatically deploy it and changes can be seen live.