Django + Github Auto deployment to Heroku

Hello coders, In this article, I’ll show you How to deploy your Django web app to Heroku, and I will also show you how to use the auto-deployment feature of Heroku.

Let’s see how to deploy Django application and enable the auto-deployment feature of Heroku.

Django Auto deployment to Heroku

First of all, we will configure our project for Heroku server before deployment.

Configuration of Django Project For Heroku

First of all you need to configure your project before deployment. So, just open the project you’ve created or want to deploy. And then get inside the root directory of that project.

I’ll use pipenv instead of pip, because of virtual env. you can also use pip command if you’re not using any virtual environment

Install Package: whitenoise and gunicorn:

Now you need to install two Python packages, which are whitenoise and gunicorn. WhiteNoise will help you to manage your static file, where gunicorn will help to communicate with heroku server

pipenv install whitenoise

and then

pipenv install gunicorn

Add Procfile and Following content

Now you need to add Procfile inside root directory. This file will not have any extension and name should be exactly same as Procfile. Now open this Procfile and add following line

web: gunicorn projectname.wsgi 

Because my project name is pass_gen, therefore my Procfile will contain something like this:

web: gunicorn pass_gen.wsgi

Add Following MIDDLEWARE:

'whitenoise.middleware.WhiteNoiseMiddleware',

Now you need to add the above item right after the first item inside the MIDDLEWARE list of settings.py

MIDDLEWARE = [
    ...,
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...,
    ...,
]

Now add STATIC_ROOT Path in Settings.py:

Now you need to add STATIC_ROOT Path in settings.py to tell where to look for static files e.g, css, js, etc.

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Add Static Folder and Run Following Command:

Now add new “static” folder inside root directory of your project, if you don’t have and then run following command to collect all inbuilt static files related to django-admin

python manage.py collectstatic

Add requirements.txt File:

Now add requirements.txt file to your root directory. So, that heroku could install all the required packages that they need to run this app on their server.

To add requirements.txt file:

pip freeze > requirements.txt

Installing Git and Push your Project Code

Now you need to install git If you haven’t installed it. Go and Just install Git from its official website and install it:

Download Git From Here: Click Here

Once you’ve downloaded your project, then simply go to your GitHub account and create a new repository and push your project code in that repository.

Once you’ve uploaded your project, then our final steps come.

Deploying Django Project to Heroku:

Now final steps come, Now we will deploy this repository to our Heroku cloud and will also enable the feature of auto-deployment.

So, first of all, you need to have an account on heroku, in order to deploy your project over there. So, just create an account for yourself if you don’t have: Click Here to create account

Once you’ve an account then just log in into that.

Create App on Heroku

Now create an app on heroku, where we will deploy our project.

Once you’ve selected name for your app then add your app_domain inside your ALLOWED_HOST in settings.py

appname.herokuapp.com

Here my app name is “genpk”, so, my domain will be “genpk.herokuapp.com”

ALLOWED_HOSTS = [
    '127.0.0.1'
    'genpk.herokuapp.com'
]

Now again, commit and push these changes to your github.

> git add .
> git commit -m "Allowed Hosts"
> git push -u origin main

Connect GitHub to You Heroku App:

Now you need connect that github repository to your heroku app. Where your configured django project is available.

So, just click to connect to the GitHub button. Once you’ve connected you GitHub account then search that repository where your django project is available. And then Connect it

Enable Auto deployment Option:

Now scroll down and there you will see option Enable Automatic Deploys, click on it to enable this feature.

And Now whenever you will make and new changes in your repository then it will automatically fetch your changes and then will apply those changes to deployed app.

Then Finally click on deploy branch:

And now your site will be fully live on url: yourappname.herokuapp.com.

You may also like: Vue.JS 3: Learn this Progressive framework

Watch video if you still have any confusion:

So, that’s it. I hope you all liked this article. If yes then please don’t forget to share this article with your friends. You could also subscribe our blog via email to get future notifications from this blog.

Thanks to read…