Deploying Your Django Web App to Heroku

Are you looking to deploy your web app to Heroku?

Heroku is a state-of-the-art Product-as-a-service designed to host scalable web apps. It was first created in 2007 and has since helped thousands of developers build products; from MVPs to fully functioning businesses. Its ability to allow diverse programming languages and frameworks is one of the many benefits that make Heroku a great platform to host your apps.

Whether this is your first web app to deploy, or you are using Heroku for the first time, this article will give you all the necessary steps to successfully deploy your web app.

Web App Preparation

Unlike in CMS-driven sites where everything is handled for you during publishing, your Django project will need some preparation before you can safely deploy it to the internet.

For example in cases where you are building a WordPress site, you don’t really have to worry about things like security. Even when you do, it’s just a matter of installing plugins that you can easily use for your website. 

On the other hand, your Django web app will require you to handle your security, as well as everything else. Sure, Heroku will handle some of your security needs but it is up to you to make sure that some of the information such as your API keys are hidden from the public. 

Therefore, it is important to break down your deployment process into steps that ensure that you hit all these requirements and that your site is safe and functional.  

Basis Installations 

1. Create Procfile

Go to your root folder and create a new file called Procfile. Procfile declare the types of commands and processes that are executed by your web app on startup. 

2. Install Gunicorn and django-heroku

On your terminal, type in 

pip install gunicorn and django-heroku

Gunicorn, also known as Green Unicorn is a pure-python WSGI server used to run python web apps. It is one of the most popular WSGIs in the market and has been used to run some of the biggest platforms in the world, such as Instagram. 

Django-heroku is a package that automatically configures your Django app so it can work on Heroku. 

You can also use Waitress-serve if you are using Windows and are having trouble configuring your web app using Gunicorn. Simply type in:

pip install waitress-serve

3. Configure Procfile

Now go back to your Procfile and type in this line of code. 

web: gunicorn <myproject>.wsgi –log-file -

If you are using the waitress-serve library, your Procfile should be configured like this:

web: waitress-serve --port=$PORT <myproject>.wsgi:application

Replace <myproject> with the name of your project. 

4. Install Whitenoise

Install Whitenoise and add it to your Middleware. 

On your terminal type: 

pip install whitenoise

Once you are done installing, go to your settings.py file and look for the Middleware section. 

Copy this line of code and add it to the middleware section. 

‘whitenoise.middleware.WhiteNoiseMiddleware’,

If you are dealing with any sort of static files, you will need whitenoise; a package that allows your Django app to serve its own static files. 

5. Create a requirements.txt File

On your terminal, type:

pip freeze > requirements.txt

This file lists all the libraries used in the project. It is important that your requirements.txt file is on the 

root directory of the project(where your manage.py file is). 

(You will see Heroku installing all the libraries from this file if you are keen during your deployment process.)

You should see the file appear in your folders. Opening it should list down all the libraries like this.

6. Create a runtime.txt File

Your runtime.txt file should also be in the root directory. Write down the version of python you are using for your project. 

For example, if you are using python version 3.9.0, write it down in the file. 

Configure Settings

Now that you are done with your basic installations, head on to your settings.py file and make some adjustments to prepare your website for deployment. 

1. Import django-heroku and dj_database_url.
2. Scroll down to the bottom and type in this line of code to activate django-heroku.

django-heroku.settings(locals))

The dj_database_url will return a Django database connection dictionary with all of the data specified in your URL. 

Django-heroku, on the other hand, is a package that automatically configures your app so that it can work on Heroku. 

Handling Security 

As mentioned above, you will be responsible for handling most of the security on your app. This includes hiding proprietary information from the public such as our secret keys, database credentials, and any other information that could give malicious people access to your site. 

To do this:

1. Go to your root directory and create a .env file. 
2. Copy and paste all the information you would like to hide such as your secret key to the new .env file you have just created. 
3. Remove all the spaces and quotation marks on these values.
4. Install python-decouple by typing

   Pip install python-decouple on your terminal

5. Go back to your settings.py file and import config from decouple.

   From decouple import config

6. Now you are going to use this config value to replace the information you would like to hide. You should have something that looks like this:
7. Open another file in your root directory, just like you did with .env, and name it .gitignore. 
8. Once done, open the .gitignore file and type .env on it. This tells GitHub To ignore the .env file.
9. Run your server to make sure that everything is running smoothly. 

Deploying Website to GitHub

Your web app is now properly prepped for deployment. 

The first step is to push it to Github. GitHub is a great versioning tool that will help you keep track and showcase your code. 

Another benefit of using GitHub is that many companies rely on the platform for version control. Working with and getting comfortable with GitHub will, therefore, give you enough practice for when you work with companies or clients that use the system. 

To push your code to GitHub, you need to use Git, a tool that relies on code to perform different actions such as pulling and pushing code into different version control platforms. 

Therefore, start by downloading Git to your computer. Follow this guide to download and install git to your computer. 

Next, it is important to prepare your GitHub page before you can push your code. 

1. Go to GitHub and sign in. 
2. Once done, open a new repository and name it accordingly depending on the project at hand.
3. Give it a description. 
4. Finally, create your repository.

Now GitHub is ready to receive your code. 

To push code, we will use git.

Fortunately, GitHub provides us with the most updated commands for pushing code to your newly created repository. 

Follow the instructions by simply copying and pasting them on your command prompt. 

You might be asked to sign in by providing your username and password. This is just an authentication procedure that allows GitHub to verify that you are allowed to actually push files to the repository.  

Points to Note

1. We did not click on the Create README.md file because the incoming instructions will show you how to create a readme.md file using your cmd prompt.
2. Also, we did not create the .gitignore file because we already added it to our code. 

Creating your Heroku Account 

Now that your code is sitting pretty in your GitHub repository, it is time to work on your Heroku account. 

It is possible to run your website on Heroku without involving GitHub. However, this is a far less comfortable route for someone who is trying to learn how Heroku works.  

Also, working with Github makes it easier to utilize functions such as automatic deployment that allows Heroku to effect changes on your website as soon as you push your code to Github. 

So go ahead and create a Heroku account. 

Creating the Environment for Deployment

Once your Heroku account is up and running, it is now time to prepare another environment for deployment. 

1. Start by clicking the “New” button on the right side of your screen to create a new app.
2. Download the Heroku CLI. Follow this guide to install the Heroku CLI on your computer.
3. Once done, type heroku –version into your cmd and check whether this is a valid command.
4. Type heroku login into your cmd to log into your Heroku account.
5. A message will prompt you to press any key to open your browser. Make sure to log in by providing your credentials.
6. Type in

   heroku git:remote –a <name>

   to connect to the Heroku app you just created. Replace <name> with the name of your app.

7. Type in git remote --v to check whether Heroku is connected to the app.
8. On the Heroku interface, look for the Open app button and click on it.
9. Look for the url, which will be the URL of your website, and copy it without the https:// and the last forward slash (/).
10. Go back to your settings folder and look for Allowed hosts []. This section simply specifies to Heroku which domains and servers your web app can run from.
11. Paste the URL you just copied from your website to the allowed hosts. Also, make sure to add your local host.
12. Go back to the Heroku page and click on the settings tab. 
13. You will see a link called Add Buildpack.
14. Click on it and add Python as your language. This tells Heroku that your app uses Python.
15. Remember that you have just made new changes to your web app. It is now time to push these changes to GitHub before we can start the deployment process. 
    1. Git add
    2. Git commit –m “New changes to settings”
    3. Git push

Points to Note

The Heroku CLI (Heroku Command Line Interface) allows you to interact with your Heroku apps from your terminal or command prompt.

With the CLI, you can perform actions such as login into your Heroku account, checking and fixing errors with your app and so much more. 

Your cmd should tell you what version of Heroku you are using once you type:

heroku –-version

You can also opt to log in through your command prompt without having to use the browser by typing in:

heroku login –-i

Deployment Process 

Once everything is ready, you are now ready to start deploying your web app from Github to Heroku. 

1. On Heroku, click on the Deploy tab and connect your new app to your GitHub repository.
2. You’ll be asked to authorize the connection.                                                                                                                                                   
3. Make sure to specify the repository and repo-name.
4. Once you are sure that everything is okay, click deploy and wait for the deployment process (This might take some time).
5. You should see the progress of the deployment in real time.
6. Once done, click on view site to see your website
7. Voila! Your website is live and ready for sharing!

Conclusion

Heroku is one of the many products that allow you to deploy your web apps to the internet. Chances are, this process will challenge you and likely throw bugs at you at every turn. However, the upside is that your first successful deployment is the first step in getting comfortable with Django and building awesome products using this framework.