Deploying Flask App To Heroku + GitHub
Tags: python, heroku, github
Published: 2022-01-16 04:11:26

Month ago, I had a client that requested me to create a Restful API project. I used Flask to deliver the project. But, the problem was how the client can test the project if I don't host the project on a server. To solve the problem, I chose something free like Heroku as this server.

## Free Heroku Limitations

There are several limitations in free account Heroku. The most important limitations I've found is we are not able to create an app that involving file upload.

For more limitations, you can see its [documentation](https://devcenter.heroku.com/articles/limits).

## Your Flask Project Setup To Work With Heroku

### Install gunicorn Dependency

To work with Heroku, there are several setup you need to do with your Flask App project. First thing first, you need to install **gunicorn** dependency along side your project. We use gunicorn for Python script to work with Unix server.

To install it, use this pip command :
`pip install gunicorn`

### Create requirements.txt

To create **requirements.txt**, go to your root project directory. Then, use this command :

`pip freeze > requirements.txt`


The name of this file must be exact, **requirements.txt**. Because, Heroku will detect this file automatically. Wrong spelling can cause your app fail to deploy on Heroku.

### Create Procfile File

**Procfile** file is a file that specifies a commands that are executed by the app on the startup. You can save this command on your Procfile file :

`web: gunicorn --chdir ./app app:app --reload --workers 4`

**NOTE** : adjust this file according to your project structure

I use additional command `--chdir ./app` because my I put my **app.py** inside **app** folder (app/app.py).

Save the file with exact name, **Procfile**.

### Your Project Structure

The structure of your project can probably like this :

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bajpgk48pa2esy6dg9az.png)

The important files you need to have are **Procfile** and **requirements.txt**.

## Push Your Project to GitHub

Before we deploy the project to Heroku, we need to push the project to a GitHub repository. So, you need to create your own repo. Then, push your code to that repo. The repo can be public or private.

## Setup Your Heroku Project

Now, login to Heroku with your registered account. On your dashboard, click button **New** > **Create new app**.

![Create new app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/on62t1griwka6naxejtm.png)

On **Create New App** page, fill the form with your app name until you get green tick.

![Create new app page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22c8dayl8ojiqbnxdksz.png)
 
Then, click **Create App** button. After that, you will be redirected to your app dashboard.

On the app dashboard, open **Deploy** section. On the **Deployment method** part, select **GitHub**.

![Connect to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcnnpw7zw1poipserhio.png)
 
If you haven't connect your Heroku to your GitHub account, you need to connect it before.

After you choose GitHub, you will get **Connect to GitHub** section. You must choose the repo you want from your GitHub account. If you find it, click **Connect** button.

![Choose GitHub repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hla9sqss4qf1qkt6etyj.png)

The next step is **deployment**. After successfully connected to GitHub repository, you need to choose what kind of deployment you want.

![Deployment option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvgkncjw4ei92ewx67d5.png)

**NOTE** : You have two options. Automatic deployment or manual deployment. I suggest, if you are using Heroku free account, you should choose manual deployment as free account has limited number of continuous deployment. So, you can limit your deployment only in case you need it.

Then, select your branch in **Manual deploy** part. After that, click **Deploy Branch**. Your deployment process will take several time, just wait for it.

If you get a status like below, this mean your deployment process is successful.

![Success deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyji2git9gk4bmntfyb0.png)

Or, you can check the status on **Overview** section of your App dashboard on **Latest activity**.

![Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24a1owse91ggm0minoz5.png)

You can open your app by clicking **Open app** button on up-right corner.

![Test app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2t71gffdcpmy8hqbfq4.png)

That's it :)