Host a Django website using Heroku
Tags: heroku, django, webdev, tutorial
Published: 2020-05-28 08:56:50

Creating a website using the Django framework is among the most basic skills a web developer or a person interested in web-development has. If you want to get into it check this [Django Tutorial](https://www.djangoproject.com/start/)

With your website done, you might want to show it to someone. But, it is a Django-based website, not just a few HTML-CSS pages with few static files that can be sent over mail. Of course, you can make it into a GitHub repo and share the URL to it, still, one need to clone the repo and then run the website using the command :

``` bash
$ python manage.py runserver
```
  
A lot of hassle on both ends isn't it. What if you can just make a public URL for the website and use the URL alone to display your project. All this, without requiring any domain names or any paid servers as well.  
 
* * *
[Heroku](https://www.heroku.com/) is a cloud application platform that enables developers to build, run, and operate applications entirely in the cloud.

Prerequisites:

1.  [Django Framework](https://www.djangoproject.com/)
2.  [Git/Github](https://git-scm.com/docs/gittutorial)
3.  [Python Virtual Environment](https://www.geeksforgeeks.org/python-virtual-environment/)

Set up the virtual environment and create your project there. If the virtual environment has not been set up initially, you can do so now by creating it and then installing all the project dependencies in it.

* * *

### **[Create a Heroku Account](https://signup.heroku.com/login)** 

![Heroku-Signup](https://dev-to-uploads.s3.amazonaws.com/i/sbl3n88sua9vto2jg1tt.jpg)  



Confirm your email and set the password You should now get the Heroku Dashboard 

![Heroku-Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/rnwklydosgdwe35vo7hr.jpg)

### **[Install the Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)**

Confirm the installation using the command

``` bash
(env)$ heroku --version
```
Get the migrations done:

``` bash
(env)$ python manage.py makemigrations 
(env)$ python manage.py migrate
``` 

## Add a Procfile

Heroku apps include a [Procfile](https://devcenter.heroku.com/articles/procfile) that specifies the commands that are executed by the app on startup.

Create a new file named "Procfile" (no file extension) in the project root (the folder where manage.py is located) and add the following content to it.

``` 
web: gunicorn {your-project-name}.wsgi —-log-file - 

example: 
web: gunicorn samplesite.wsgi —-log-file - 
```
 

Ensure you replace _samplesite_ with your project name (name of the folder containing the manage.py file)

The Procfile is a process file that tells the **dyno** (Lightweight Linux containers to run your application) the process to run for setting up your application. 

>**`web: gunicorn`** : start a web process using [gunicorn](https://gunicorn.org/), a production web server recommended for python applications.  

>**`samplesite.wsgi`** : to look for the wsgi (Web Server Gateway Interface) file inside the _samplesite_ (your-project-name) folder 

>**`—-log-file -`** : log to stdout

  

### Next, install gunicorn and django-heroku

``` bash
(env)$ pip install gunicorn 
(env)$ pip install django-heroku 
```

Create the requirements.txt file in the project root.

``` bash
(env)$ pip freeze > requirements.txt
```

## Create Heroku App

Login to Heroku Using

``` bash
(env)$ heroku login 
```

![Heroku Login cmd](https://dev-to-uploads.s3.amazonaws.com/i/nnn2g3w5kyrztknev14z.jpg)


Confirm the Log In in the browser window which opens. You should get the following screen. ![Heroku Logged In](https://dev-to-uploads.s3.amazonaws.com/i/1ekf0f6zfxsff0w4alj8.jpg)

and the confirmation for the same in the terminal

  
### **Create Heroku App using terminal**

You can choose any URL for the project (containing lowercase letters, digits & dashes only). If the heroku app name or the URL is not available you will get an error message.

``` bash
(env)$ heroku create {project-url} 
```

![Heroku create appname](https://dev-to-uploads.s3.amazonaws.com/i/kyg5yl0blemw7r8b9anw.jpg) 

Alternative, using just

``` bash
(env)$ heroku create
```

heroku will auto-generate a name for your app. 
![Heroku create](https://dev-to-uploads.s3.amazonaws.com/i/fbfpr6904v2qwrbwwpn6.jpg) 

**In _settings.py_** 
Add your app domain name to ALLOWED\_HOSTS

```python
ALLOWED_HOSTS = ['test-django-heroku.herokuapp.com']
```

Add this to the top of _settings.py_

```python
import django_heroku 
```

and this to the bottom of _settings.py_

```python
 # Activate Django-Heroku. 
 django_heroku.settings(locals()) 
 ```

## Setting up Heroku remote

We need to initialize a git repository to push the changes from the local machine on to the Heroku server.

``` bash
(env)$ git init 
```

**add .gitignore** 

Create a .gitignore file with the following content (to prevent the cache from building up on the remote).

```python
 # Environments 
 .env 
 env/ 
 # Django stuff: 
 __pycache__/ 
 *.log 
 *.pot 
 *.pyc 
 local_settings.py 
 ```

  

Your project repo tree should be similar
```
env/
projectname/
    appname/     
    projectname/
        .      
        settings.py
        . 
    manage.py  
    Procfile
    requirements.txt
.gitignore`  
```

**Stage and commit the changes**

``` bash
(env)$ git add . 
(env)$ git commit -m "Project Initialized" 
```

### **Add the Heroku remote**

``` bash
(env)$ git remote add heroku https://git.heroku.com/test-django-heroku.git 
```

Make sure to **change the git repo url** with the one generated for your app. Check for the added remote using :

``` bash
(env)$ git remote -v 
```

Push the changes to the Heroku server

``` bash
(env)$ git push heroku master 
```

Here you might receive an error saying No default language could be detected for the app. So, use the following command to tell git to look for the project files in the projectname folder instead of the root of the git repo.

``` bash
(env) git subtree push —-prefix projectname heroku master 
```

You should get the following output for a successful deployment. 

![Heroku Deployed op](https://dev-to-uploads.s3.amazonaws.com/i/ir3w5yqngabnbvpem3p1.jpg)
 **DONE! Your app is deployed** and can be explored in the mentioned URL.  

> You can run the Django shell commands on the heroko app too using
>
>  ``` heroku run bash ```

You will have the run the migrations on the heroku database as well

``` bash
(env)$ heroku run python manage.py makemigrations 
(env)$ heroku run python manage.py migrate 
```
  

Your app should now be listed on [Heroku Dashboard](https://dashboard.heroku.com/apps) 

![Heroku Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/xqahwi8ejwpx20t2zlac.jpg)

Explore the app and look out for what more can be done.

  
For serving the static files you will have to configure [whitenoise](http://whitenoise.evans.io/en/stable/), a static file service for python web-apps. The [documentation](http://whitenoise.evans.io/en/stable/django.html) explains it in a pretty straightforward manner.  
  
  

* * *

**Note:** If you plan to use this hosted site for production and not just testing/demo purposes, ensure you use the PostgreSQL database as Heroku mentions it [here](https://devcenter.heroku.com/articles/sqlite3).  
Also, make sure to disable the DEBUG flags when in production mode.

* * *