Deploy your React-Django app on Heroku
This is a follow up to my post on setting up a React-Django web app. You can take a quick glance if you’ve not yet seen it.
There are several reasons why you might not want to have separate code bases for the front and back end of your app…medium.com
We’re going to be deploying the app we setup in the previous post on Heroku. Heroku is a popular cloud hosting platform (PaaS) and offers a generous free tier which we’ll be using.
There are a couple deploy methods to choose from on Heroku (visit the deploy tab on the app page on the dashboard). Here, we’ll use the Heroku Git method via the Heroku CLI. Here’s a guide on how to set up Heroku CLI on your OS: https://devcenter.heroku.com/articles/heroku-cli.
Now, let’s link our project to the Heroku app we created using the Heroku CLI and Git.
- Initialize a Git repository in the root folder of the project with
git init(you need to have Git installed on your computer).
- Login with your Heroku account on the CLI using
- Add the Heroku remote via
heroku git:remote -a your-heroku-app.
The React app build process depends on NPM, so we need Node.js. We also need Python to run Django.
Heroku uses buildpacks to transform deployed code into slugs which can be executed by Dynos (server instances on Heroku). We’ll be needing two buildpacks. One for Node and another for Python.
Our app would run on a Python server, even though we’ll use Node/NPM to build/bundle the React frontend. So the Python buildpack will be the main one in our config. The main buildpack determines the process type of the Heroku app. You can read about multiple buildpacks here: https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app.
You can add buildpacks via the Heroku CLI. Head back to your terminal and run the following to set/add the buildpacks we need.
$ heroku buildpacks:set heroku/python
Now add the buildpack for Node.js.
$ heroku buildpacks:add --index 1 heroku/nodejs
We can see the buildpacks we’ve added by running
heroku buildpacks. The last buildpack on the list determines the process type of the app.
We need to tell the Node.js buildpack to build the React app after it has installed Node and NPM. We can do this by adding the build command
npm run build in the postinstall hook.
Notice that I specified Node and NPM versions in engines. The buildpack will install these exact versions. It’s highly recommended you use the versions running on your PC to avoid errors from a version that might be incompatible with your code.
Create a file called Procfile (no file extension) in the project root and add the following code (read more about Procfile here: https://devcenter.heroku.com/articles/procfile).
release: python manage.py migrate
web: gunicorn reactdjango.wsgi --log-file -
Replace reactdjango.wsgi with YOUR-DJANGO-APP-NAME.wsgi.
The Python buildpack, after installing Python looks for requirements.txt to install the dependencies in it. Add the following to the requirements file, including all the other dependencies your Django app needs.
PS: Whitenoise helps to serve static files and Gunicorn is the HTTP server we’ll be using.
By the way, you can specify the Python version you want by adding it to a file named runtime.txt in the project root.
Configure whitenoise to serve static files by doing the following:
Add static root and static files storage in settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
Add whitenoise to your wsgi.py file like so:
from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
application = get_wsgi_application()
application = DjangoWhiteNoise(application)
In your settings.py, you need to add your Heroku domain to allowed hosts.
ALLOWED_HOSTS = ['react-django.herokuapp.com', '127.0.0.1:8000']
NB: I personally prefer to add allowed hosts using environment variables e.g with python-dotenv.
It’s time to commit and push the changes. Phew!
git add .
git commit -m "blah blah blah"
git push heroku master
After the build is done and your app has been released, visit YOUR-APP-NAME.herokuapp.com. Neat!
If you had any issues deploying, cast your cares in the responses. A lot of times, things don’t work the first time.