Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set the default subtitles language in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Host Your Django Project on Heroku (Overview)

As a novice web developer, you’ve built your portfolio app and shared your code on GitHub. Perhaps, you’re hoping to attract technical recruiters to land your first programming job. Many coding bootcamp graduates are likely doing the same thing. To differentiate yourself from the crowd and boost your chances of getting noticed, you can start hosting your Django project online.

For a hobby Django project, you’ll want a hosting service that’s free of charge, quick to set up, user-friendly, and well-integrated with your existing technology stack. While GitHub Pages is perfect for hosting static websites and websites with JavaScript, you’ll need a web server to run your Flask or Django project.

There are a few major cloud platform providers operating in different models, but you’re going to explore Heroku in this course. It ticks all the boxes—it’s free, quick to set up, user-friendly, and well-integrated with Django—and is the favorite cloud platform provider of many startups.

In this course, you’ll learn how to:

  • Sign up for a free Heroku account
  • Use the Heroku CLI (command-line interface)
  • Bootstrap a minimal Django project
  • Integrate Git with Heroku
  • Connect to Heroku’s PostgreSQL database
  • Manage configuration, make new releases and rollbacks

00:00 Hi. In this course, you’ll learn how to host your Django project in the cloud for free using the Heroku platform. By the end of it, you’ll have a public URL address to share with anyone to let them access and use your web application over the internet.

00:14 They can be your friends, your family, or even a prospective employer who stumbled across your LinkedIn profile. Using Heroku is a fantastic way to get your portfolio project noticed and make yourself stand out from the crowd. In this course, you’ll learn how to sign up for a free Heroku account, use the Heroku command-line interface to create and manage your apps in the cloud, quickly bootstrap a bare-bones Django project from scratch or reuse one of your own, deploy your code to Heroku using the familiar Git commands, manage configuration on Heroku, hook up your Django project to a relational database provisioned by Heroku at no charge, and make new releases and rollbacks of your project as it evolves.

01:00 Because you’ll be working almost exclusively in the terminal, you should already be somewhat comfortable around it. Specifically, you’ll be using Bash in this course. However, if you feel lost at any point, then you can download a convenient cheat sheet of all the commands used throughout this course that you’ll find in the supporting materials.

01:19 Additionally, you’ll need a Git client installed on your computer and know how to work with this popular version control system. If you need a quick refresher on that, then check out Real Python’s introduction to Git and GitHub for Python developers.

01:33 For best results, make sure that you have some Django project working locally on your computer before moving on. You can use whatever you’d like, including one of your hobby projects, but even the most streamlined web application will be just fine. To set up a new Django project, you can just stick around and follow this course or jump to another tutorial for more details. You can also watch its video counterpart if that’s more convenient to you. Alternatively, for something a bit more elaborate, you might watch a course about building your portfolio project. Without further ado, it’s time to sign up for your Heroku account.

jeffli336 on Jan. 1, 2022

I ran into one issue to deploy static image files on Heroku. The error shown in application logs is HTTP 404, file not found:

2022-01-01T03:48:25.767515+00:00 app[web.1]: 10.1.21.4 - - [01/Jan/2022:03:48:25 +0000] "GET /projects/ HTTP/1.1" 200 924 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36"
2022-01-01T03:48:26.016749+00:00 app[web.1]: Not Found: /static/img/daily.png
2022-01-01T03:48:26.017369+00:00 app[web.1]: 10.1.87.47 - - [01/Jan/2022:03:48:26 +0000] "GET /static/img/daily.png HTTP/1.1" 404 2268 "https://serene-bayou-01839.herokuapp.com/projects/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36"

In setting.py file we have the following settings: (I am following the guide based on this link devcenter.heroku.com/articles/django-assets)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'projects/static'),
)

In template HTML file:

        {% for project in projects %}
            {% load static %}
            <img src="{% static '/img/daily.png' %}" alt="img files">
        {% endfor %}

The images files are stored in the following folders:

./static
./static/.DS_Store
./static/css
./static/img
./static/img/daily.png
./static/img/testproject.png
./static/img/todo.png

Could you shed some lights where could be the issue?

Bartosz Zaczyński RP Team on Jan. 3, 2022

@jeffli336 At first glance, it looks like Django is looking for your image files in the wrong folder, i.e., static/ instead of staticfiles/ that you declared in the settings. Apart from that, the {% load static %} macro should be placed at the top of your template file. Let me know if that helps. If not, then please share the source code through GitHub, for example, so that it’s easier to reproduce the problem.

jeffli336 on Jan. 4, 2022

Hi Bartosz,

Thank you so much for your quick reply.

I updated static config in settings.py and {% load static %} macro in template file, it didn’t fix the issue.

Here is the GitHub repository for my testing code github.com/hongli336/heroku_python

Here is the web site link hosted on Heroku serene-bayou-01839.herokuapp.com/projects/

Thanks

Bartosz Zaczyński RP Team on Jan. 4, 2022

@jeffli336 Thanks for sharing your code. I looked through it and have an answer for you, but it’s a bit complicated as there are multiple moving parts that affect hosting static resources.

If you switch to the development web server built into Django in your Procfile, then you should be able to request static resources through Heroku more easily:

# Procfile
web: python manage.py runserver 0.0.0.0:$PORT

But you’re using gunicorn instead, which is the right choice for production. Unfortunately, gunicorn has to be placed behind a reverse proxy, such as nginx, which in turn must be specifically configured to serve static resources. However, you can’t install nginx or any other tool since the underlying infrastructure is kept away from you by Heroku. What you can do, however, is install the whitenose library, which will automatically configure your Django project to serve its own static files through gunicorn.

To do that, install whitenoise into your virtual environment and pin the dependencies in your requirements file so that Heroku can pick them up later:

(venv) $ python -m pip install django gunicorn whitenoise
(venv) $ python -m pip freeze > requirements.txt

Next, add new middleware corresponding to whitenoise in your settings file:

# portfolio/settings.py

# ...

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',
]

Make sure the whitenoise middleware is placed exactly where shown above, i.e., after the security middleware.

Then, you need to do a little cleanup. Start by removing the staticfiles/ folder, which should not be committed to Git as it contains files collected by Django.

Also, you don’t need the STATICFILES_DIRS variable in your settings files, so go ahead and remove that too. It’s only necessary if you store your static resources in a non-standard location, which isn’t the case here. Django will look for static files in the static/ folder in your apps by default.

The STATIC_ROOT variable can be a little confusing because it’s the target directory where Django will collect files into. Let’s rename it to staticfiles/ to avoid confusion, and also, let’s take advantage of the new pathlib syntax. In the end, your settings file should only contain the following configuration for static resources:

# portfolio/settings.py

# ...

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'

Finally, don’t forget to commit and push your changes:

(venv) $ git add .
(venv) $ git commit -m "Host static resources with whitenoise"
(venv) $ git push heroku

This should do the trick and make the static resources available to the web browser.

By the way, you can check out a video lesson on the best practices for hosting static files in Django if you haven’t already. In a nutshell, if you have more apps, then it’s advisable to use the double-folder structure explained in the video.

Let me know if that helps or if you need more assistance. Take care!

allapopovarus on Jan. 16, 2022

Hi Bartosz, I’ve added whitenoise and configured settings as you said but I still static still hasn’t appeared. More the wise staticfiles folder dosn’t want to see new app, the last one was added. Here is my repo github.com/Saulyaka/belevets Her is my project belevets.herokuapp.com/

allapopovarus on Jan. 17, 2022

Finally I went to another direction - create urls instead of download statics

allapopovarus on Jan. 26, 2022

Hi Bartosz, Could you give me any ideas of: The page you are trying to view cannot be shown because the authenticity of the received data could not be verified. This is the message when I try upload video to AWS S3 via admin of my project on heroku. From the localhost there was no such error.

Bartosz Zaczyński RP Team on Jan. 27, 2022

This sounds to me like a problem with the SSL certificate. At which point are you getting this error?

allapopovarus on Jan. 27, 2022

When I try to save object from admin. Object with upload field - type video.mp4 size 27 mb

Become a Member to join the conversation.