Deploying Your Django App To Heroku

Requirements

1. Git—Click the link and download the installer.
2. Heroku CLI  — Click the link and download the installer.

After successfully installing the above requirements, below are the steps for deploying your react app to heroku.

Steps Involved

Step 1 

Sign up For Heroku

Visit Heroku to sign up

This step is self-explanatory, you head over to heroku and sign up. Once you signed up make sure you head over to your email and confirm your account. now you can start your deployment with heroku.

Step 2

 Open your command prompt and go to your project directory using the cd command. Activate your Django environment if you have one.

Login to Heroku by typing in the following:

 heroku login

Step 3

We need some prerequisites to deploy a web app to Heroku. First of all, we need a procfile.

Add a Procfile in the project root directory by using the following command:

 echo web: gunicorn yourprojectname.wsgi --log-file - >Procfile

Step 4

Add a runtime.txt file in the project root directory and specify the correct Python version.

So, open your project folder manually and create a txt file called ‘runtime’. Open it and paste the following:

  python-3.x.x

Step 5

Install the required packages in the environment by using the following command.

 pip install gunicorn dj-database-url whitenoise psycopg2

Step 6

Add a requirements.txt file using the following command:

  pip freeze > requirements.txt

Now, manually go to your project directory and open the requirements.txt file. Remove all other requirements in the file except the one's required in your project and the following:

dj-database-url==0.4.2
Django==1.11.7
gunicorn==19.7.1
psycopg2==2.7.3.2
pytz==2017.3
whitenoise==3.3.1

Step 7

Let’s set up the static assets and database configuration. Open up settings.py file and make the following changes, preferably at the bottom of the file.

#Static files (CSS, JavaScript, Images)
#https://docs.djangoproject.com/en/2.2/howto/static-files/
PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(file)))
STATIC_ROOT  =   os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
#Extra lookup directories for collectstatic to find static files
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)
#Add configuration for static files storage using whitenoise
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
import dj_database_url 
prod_db  =  dj_database_url.config(conn_max_age=500)
DATABASES['default'].update(prod_db)

Step 8

Add the whitenoise middleware at the top of the middleware list in settings.py file.

'whitenoise.middleware.WhiteNoiseMiddleware', 
...
...

Step 9

Create a Heroku app by using the following command.

heroku create yourAppname

Heroku will check and let you know if the name is already taken. Appname must be unique.

Step 10

You’ll get a domain name -->yourAppname.herokuapp.com. Add your app domain name to ALLOWED_HOSTS in settings.py.

ALLOWED_HOSTS = ['yourAppname.herokuapp.com']

Step 11

still at your project directory in command prompt and still logged into heroku, else use heroku login command to login to heroku from the command prompt.

Once you’re logged in, type in the following commands.

git init

heroku git:remote -a yourAppname

git add .

git commit -m "Initial commit"

If you get a crediential error, verify your email id and user name using the following commands and do the commit again.

git config --global user.email "youremailid@gmail.com"

git config --global user.name "Your Name"

git commit -m "Initial commit"

Step 12

Push the project to the remote repository using the following command

git push heroku master

Step 13

Migrate the database.

heroku run python manage.py migrate

Step 14

Open the URL. yourAppname.herokuapp.com and you’ll see your app running live