After spending long hours trying to develop that perfect web app with Django, that feeling of the time being right, and the mood all set up to put it out into the real world and for users to enjoy and for your bank account(s) to start smiling, ‘cause obviously, no users = no profit'.
But what happens when we can’t afford any of the expensive Server hosting sites? In this article, I will be showing you how to deploy a Django based web app (www.hellosam.ng) to Heroku for free.
Before we get started, What is this thing called Heroku and What is behind the magic of Deploying?
Heroku is a Platform as a Service website that allows you host your web app with basic functionalities for free. You can always create an account at www.heroku.com.
While Deploying involves the process of pushing our web application to a remote server so that the audience can have access to it.
Great! Now we can get started, Firstly, Heroku needs to be installed on our development Machines. (No Heroku installed? Then we would just be deceiving each other)
NOTE: I run a Linux (Ubuntu) machine, although most of the codes displayed here were written and geared towards the same OS users, I also made alternative provisions for other users running on other OS though.
To install Heroku terminal app on Ubuntu, type in the following command into your Terminal:
sudo add-apt-repository “deb https://cli-assets.heroku.com/branches/stable/apt ./”
curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add -
sudo apt-get update
sudo apt-get install heroku
On windows, you can either download the 32bit or 64bit versions.
For the MAC users, you can either download and run the installer, or if you have homebrew installed, you can run the following command to install it:
brew install heroku
After installing,open up your terminal and login to your Heroku account.
heroku login
Awesome! Now we have Heroku successfully installed on our local machine, and can now get started preparing our Django web app to be deployed to Heroku.
The next step is to create a requirements.txt file in the root of our web app. We need to have this requirements.txt file to let Heroku know our application is a Python(Django) project, else it won’t be recognized. Even if your web app has no dependencies, you can simply create an empty requirements.txt file. The requirements.txt file helps lists the app’s dependencies alongside their versions, this allows Heroku know what dependencies to deploy and the appropriate versions.
To quickly generate a requirements.txt file if you don’t know what dependencies your app has, or you’re just too lazy to create one from scratch (like me), you would need to start your virtual environment and in the root of your app, run in terminal:
pip freeze > requirements.txt
The above command will get the list of your dependencies from the command ‘pip freeze’ and copy them to the requirements.txt file, this automatically generates for you if it does not exist.
Once that has been successfully generated, we need to generate a Procfile in the same project root. This file defines process type and tells what command should execute to enable your app start. It will look something like this:
# Procfile
web: gunicorn blog.wsgi –log-file -
The only difference between my Procfile and yours, would be the part before the ‘.wsgi’. This part would basically be the name of your project, because the wsgi file resides in your project’s folder.
Next, we need to create a runtime.txt file. This file will carry explicitly the specific version of Python your projects makes use of. To achieve this, I’m sorry there’s no shortcut for this, you have to create a ‘runtime.txt’ file in your Django project root and put in the exact version of Python you are making use of in the following format:
# Runtime.txt
python-2.7.12
To get the exact version of Python you are making use of, run the following command right in the terminal with your virtual environment activated:
python –version
Next we have to set up our static assets so our app’s front end designs won’t break when deployed to the server. We would need to install dj_database_url and whitenoise before we proceed:
pip install dj_database_url
pip install whitenoise
Don’t forget to update our requirements.txt file after these has been installed:
pip freeze > requirements.txt
To configure our app’s static related parameters, we need to get into our settings.py file and change some parts of the file or edit accordingly.
NOTE: If you already have any of these settings all set up and working without problems, you do not have to change it:
# Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(BASE_DIR, "static_cdn")
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media_cdn")
Also, we need to change our database declaration in our settings.py to the following:
# Settings.py
DATABASES = {'default': dj_database_url.config()}
While importing dj_database_url at the top of our settings.py file:
# Settings.py
import dj_database_url
NOTE: We do not need to add the whitenoise we installed to our wsgi.py file which is based in our project directory,
After this step, our wsgi.py file should look like the one below:
# WSGI.py
import os
from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
os.environ.setdefault(“DJANGO_SETTING_MODULE”, “blog.settings”)
application = get_wsgi_application()
application = DjangoWhiteNoise(application)
The last thing we need to edit in our settings.py file is the ALLOWED_HOSTS part. Here we would need to put in the domain name our users would be making use of to access our awesome web app, else it would throw errors when we finally deploy.
Also, we need to turn off the DEBUG option. Here is how both lines should look like after editing:
# Settings.py
DEBUG = False
ALLOWED_HOSTS = [‘example.herokuapp.com’]
Finally we are ready to deploy! yaah!, but before we finally deploy, it would be best if we built this app and run it locally to be sure we do not have any error when deploying.
NOTE: This step is optional but I always do it as it helps me see any error before hand so I can fix completely and just deploy correctly at once.
Run this command to install all your dependencies locally:
pip install -r requirements.txt
Then run:
heroku local
Your app should now be running on http://0.00.0.0:5000. If this works, it means you can now successfully push to Heroku without problems.
NOTE: You might come across an error which states something along the lines of ‘one of the static file you are referencing is missing’, all you need to do to resolve this problem is to remove the reference to the static file.
Now, we can deploy to Heroku:
heroku login
git add .
git commit -m “Added for deploy”
heroku create ‘name-of-app-without-the-quotes’
NOTE: you can always leave out the name of app out of the command and Heroku will automatically generate a name for you.
Finally Run:
git push heroku master
Access your browser and voila! your web app is live and ready for users to interact in real time!.
Top comments (2)
I appreciate it!. I really like it when people get together and share ideas. Great website, continue the good work!. Either way, great web and I look forward to seeing it grow over time. Thank you so much.
super smash flash 2
bloons tower defense 5
kinguserapp