App Deployment on Heroku

Dear readers,

Today I will be writing regarding the deployment of your app on Heroku. For those who do not know what is Heroku, it is a platform where you can host your website or software on their server. The purpose of me using Heroku is due to the free tier available. This allows me to run my stuff on Heroku for free and not needing to host my own server. You can visit Heroku’s website here.

For my example, I will be hosting a Telegram bot script written by Python, on Heroku. This guide was written as I was learning and researching ways to host on Heroku and keep it running. Hence, I hope this post will be of help to you.

Table of Content

App Creation

Setup

Upload Your Code

Run Your App

  1. Telegram Bot
  2. Web App

Increase Free Dyno Hours

App Creation

Firstly, let’s create an app. You can do so by navigating to “Dashboard”. You can find that option by clicking on the ‘More Option’ icon. See Figure 1a where I have circled the ‘More Option’ icon in green, “Dashboard” in red.

herok1

Figure 1a: More Options icon & Dashboard navigation

You can see “sxnotibot” in the image above. That is because I have created sxnotibot which is my mini project before I wrote this post. Therefore, your dashboard should be empty.

Click on “New” button > “Create new app” (see Figure 1b).

herok2

Figure 1b: Navigate to new app creation

Input your app name and click “Create app” (see Figure 1c). You may choose a region but I just set it to “United States”.

herok3

Figure 1c: Create new app

Setup

Navigate to Deploy > Connect to GitHub. You may use other methods to upload your content to Heroku. For this post, I will be showing the GitHub method as that’s the method I used to upload my code. You may see a guide to uploading your code when you click on the other upload methods.

You have to log in to your GitHub account and authorize it. After authorizing, you will see this page (see Figure 2a). Make sure your account is correct before searching for the GitHub code you have uploaded. NOTE: If you have not uploaded your code to a GitHub account, do so before following this step. After searching, click on “Connect”.

herok4

Figure 2a: Setup upload method

After clicking on the “Connect” button, click on the “Enable Automatic Deploys” button so it will automatically deploy our app whenever we upload a new code (see Figure 2b).

herok5

Figure 2b: Enable automatic deploys

Next, navigate to “Settings” then click on “Add buildpack” in the “Info” section (see Figure 2c).

herok6

Figure 2c: Add buildpack

Click on “Python” and click “Save changes” (see Figure 2d).

herok7

Figure 2d: Add Python buildpack

Upload Your Code

Before you upload your code, you have to create a file called “requirements.txt” which has to be upload onto the same GitHub folder as the rest of your code. The purpose of requirements.txt is to allow Heroku to know what are the dependencies needed and it will use ‘pip’ to install the required dependencies. In your requirements.txt, you should include all the external modules you have downloaded via pip. Each module needed should be written on a new line. In Figure 3a, I only needed “telepot” which is needed for Telegram bot. Hence, that is the only thing that is included in my requirements.txt. You can add comments to requirements.txt by adding hashtag in-front.

herok8

Figure 3a: Inside requirements.txt

“requirements.txt” should be on the most external folder in your GitHub commit. It should not be inside any other folder (see Figure 3b).

herok9

Figure 3b: Layout of files on GitHub

If the upload and build are successful, you will see the notification on the “Activity” tab.

Run Your App

Finally, we have come to the final main section of the post. Run your app.

To run your app, we will need Heroku’s worker. This worker will keep your app running and prevent it from sleeping. It will also help to initialize the running of your app from their internal console.

There are two ways to run your app. I will be talking about the recommended way for Telegram bot and follow by running the website (web) app.

Telegram Bot

For Telegram Bot, you can easily configure this by including a Procfile file in your GitHub’s app root directory (see Figure 4a). It should be a File type with no file extension. You have to name the file as “Procfile” and upload it onto GitHub with the rest of your code for this app.

h3

Figure 4a: Create Procfile

In the file content, you should have a text with the following format: worker: python . In my case, in my Procfile will contain worker: python main.py (see Figure 4b). You can see other process types or options for Procfile here.

h4

Figure 4b: Content in my Procfile

Commit the file to GitHub once you are ready. If everything is successful, navigate to the “Resources” tab and you will see your worker in the “Free dyno” section (see Figure 4c). Your screen may show the switch is on the left while mine is on the right as I have already turn it on. Slide the switch to the right to turn it on by pressing on the edit button first.

h5

Figure 4c: Display of worker in the “Resources” tab

Switch the button to the right by clicking it. You see the background of the switch turned blue (see Figure 4d). Press “Confirm”. Your Telegram bot will start running soon.

h6

Figure 4d: Toggle the turn-on switch

The benefits of this due to its simplicity to configure it. For our example, we are using worker process which will not go to sleep for free tier after an hour, unlike web worker which is needed for website app (see this). A web worker is a must for those require external incoming HTTP requests. For our Telegram bot, it connects to the Telegram server instead of waiting for an incoming connection from other people. Hence we can use the worker process which will not go to sleep.

For the next section, we will be talking about how to keep the web process running for web app.

Web App

Firstly, navigate to “Resources” and search for “Heroku Scheduler” (see Figure 5a).

heroku1

Figure 5a: Search for “Heroku Scheduler”

Click on “Provision” (see Figure 5b).

h1

Figure 5b: Select “Provision”

Click on “Heroku Scheduler” (see Figure 5c). A new tab will be opened.

h2

Figure 5c: Go to “Heroku Scheduler” settings

Click on “Create job” (see Figure 5d).

heroku2

Figure 5d: Select “Create job”

Input the command you need to run your web app just like how you will run your web app locally on your personal computer (see Figure 5e). In my case, “main.py” is my main file to run. Therefore, to run it, I will use a Python interpreter to run my “main.py”. You can see the interval for this command to run. I have read that for the free tier, the app will sleep after 30mins. There is no option for 30mins. The rest of the options are an hour or once a day. Therefore, every 10 mins seem to be the best option. NOTE: I am not sure if it really sleeps after 30 mins as I did not do an experiment to test if it is true. It was based on reading other people’s blogs. 

You can read more about the commands to run the web process workers for web apps here.

heroku3

Figure 5e: Add command to scheduler

Increase Free Dyno Hours

The free tier’s number of hours is only 550 hours per Heroku account. To increase it, you can include your credit card details to your account. Additional hundreds of free hours will be given to you, giving you a total of 1000 free hours. This will allow you to let your app stay alive 24/7 if you only have one app running per Heroku account. This will last you for a month and refreshes at the end of the month. Don’t worry about overshooting 1000 free hours as long as you host one app per account, it will be fine.

Alternatively, if you dislike giving your credit card details, you can use a third-party website such as “Kaffeine” that helps you to prevent your app from sleeping in Heroku. You can read more on this blog.

I hope this post will be of great help to you. You may leave comments for any questions you have or any corrections I should make. Thank you.

You may also send me some tips if you like my work and want to see more of such content. Funds will mostly be used for my boba milk tea addiction. The link is here. 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.