How Correctly Deploy A Django 3.2 App In Heroku And Avoiding 500 Server Error

When I want to deploy my Django website to Heroku, it was a nightmare for me, starting with some errors related to static files, passing by Heroku complaining about serval things in the log, and finishing with 500 Server Error.

After about 13 commits trying to deploy on Heroku (click HERE to visit the repo of the app I've tried to deploy if you want to check the commits), I passed with all different scenarios of errors that why I decided to write this article for other people to avoid those errors much as possible.

As we know Heroku is a good place to deploy our dynamic web apps, but that comes at a certain cost including dealing with static files, some unexpected errors, etc. But still, a pretty good deal compared to get your dynamic app hosted for FREE.

assume that you are already familiar with the basics of Django, I mean, c'mon how even you will deploy a Django app if you don't know anything about Django 😕.

First, go to the Heroku dashboard from HERE, then create a new app, give it a name, choose a region close to you or your targeted audience to gain a little bit of speed in loading your application, then Create app.

After your app created go to Settings>Buildpacks click on Add buildpack and choose Python then Save changes.

In your project folder go to settings.py and change debug to false and add your app URL provided by Heroku to the allowed host, usually, the URL will be app-name.herokuapp.com, this is a list so you can add multiple hosts to the ALLOWED_HOSTS.

...
 DEBUG = False
 ALLOWED_HOSTS = ['pollsappdjango.herokuapp.com', '127.0.0.1']
...

The next step is to install gunicorn to handle the stuff related the to server and whitenoise to handle staff related to static files, make sure that you installed these within your environment variable activated so you can extract the requirements.txt later.

pip install gunicorn whitenoise

Then, run the command (within your environment variable activated) :

pip freeze > requirements.txt

This snippet will generate all the dependencies that Heroku needs to make your application work.

Go back to the settings.py file and add this line whitenoise.middleware.WhiteNoiseMiddleware, to the middleware so Heroku can handle your static files correctly (you can know more about whitenoise in the Documentation HERE) so your MIDDLEWARE will be:

...
MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',

  'whitenoise.middleware.WhiteNoiseMiddleware',

  'django.contrib.sessions.middleware.SessionMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...

Create a file called runtime.txt at the root of your project and write the version of python you use, if you want to know the version just type in the terminal:

python --version

When you knew your version write it in the runtime.txt as follows (for me I use python 3.8.5).

python-3.8.5

Let's create another file for Heroku config related stuff (you can know more about it in the Heroku documentation), this file called Procfile inside of write:

web: gunicorn projectName.wsgi --log-file -

Replace the projectName with the name of your project for example in my case the project folder which contains the settings.py and wsgi.py called core, you probably knew that, if you have been checked the repo at the first of this article

Again go to settings.py add this snippet to your file (make sure you import the os module):

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

With all these steps your Django app will be deployed without any error but in some cases when you will try to access your app then you will face a 500 Server Error, to avoid all those problems run this command in the root directory of your project:

python manage.py collectstatic

This command will generate all the static files of your project for making thing easier for Heroku to handle that.

Next, add your project to Github, because we will be deployed through Github from Heroku, push your project to Github repo (Private or Pubic repo, that's your choice), Then go to the Heroku app dashboard page and select Deploy tab then choose Github.

Search for your Github repo and click on connect, then click on Deploy Branch, and voila your application will be worked just fine.

Make sure that your db.sqlite3 is in the repo because you will get a 500 Server Error because the app can't fetch the data from anywhere.

In the near future, I will make an article about how to set up a Postgres database whit your Django project because db.sqlite3 is not very good for production in terms of efficiency and scalability.

Recap:

• Create and set up the app from Heroku Dashboard
• Install gunicorn and whitenoise
• Generate requirements.txt.
• Make changes on settings.py file.
• Add a file called runtime.txt that contains the version of python.
• Add a file called Procfile contain some settings for Heroku.
• Run the command to collect static files to avoid any future 500 Server Error.
• Don't forget to add db.sqlite3 to the repo so the app can fetch data from it.

Thank you for reading the article and stay tuned for setting up the Postgres database with the Django app on Heroku.