Hosting your django project on vercel: A quick and easy deployment

Building django projects have always been fun for me until it gets to deploying them. In the past, Heroku was used but then just when I started learning to build django applications, it stopped it's free tier so I had to find an alternative. Looking for an alternative, I found out about Railway where I've hosted a lot of my projects but then, there was also a problem. After three months, I'd have run out of my free tier which means I either need to delete my account or ... Then I started learning how to deploy my django projects to vercel which I did and that's what I'm going to share in this post.

ElephantSQL

Most times, our backend requires a database and vercel does not support using the default dbsqlite3 and they do not provide a database for use so we will be using ElephantSQL for hosting our database.

Creating accounts

Since we will be using two platforms for our hosting, it will be nice to get started by creating an account.

• Create vercel account here. It will be best to signin using your github account to ease deployment.
• Create elephantsql account here.

Configuring our django project

Our django application will need some tweaking to work well on vercel so follow the steps below.

Create a build_files.sh file

Create a file named build_files.sh which will contain shell commands to build our project. Add the following lines of code to it.

# build_files.sh

pip install -r requirements.txt
python3.x manage.py collectstatic --no-input --clear

The version of python to be specified should be the one used in your django project.

Vercel.json

This is the configuration file that tells vercel about our django project.

{
  "version": 2,
  "builds": [
    {
      "src": "your_project/wsgi.py",
      "use": "@vercel/python",
      "config": {"maxLambdaSize": "15mb", "runtime": "python3.x"}
    },
    {
      "src": "build_files.sh",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "staticfiles"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "your_project/wsgi.py"
    },
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    }
  ]
}

Copy and paste this in your vercel.json file and don't forget to change your_project to your original project name which is the name of the directory containing the wsgi.py file.

Also, remember to state the python version vercel should use for your project instead of python3.x

Next, we will make a little change to our wsgi.py file to let python know about our wsgi application.

### project/wsgi.py

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'Quiz.settings')

application = get_wsgi_application()

# vercel config

app = application # add this line.

This is the last step we'll take and that will be in our project's settings.py file.

### project/settings.py

import os
import dj_database_url

SECRET_KEY = os.environ.get("SECRET_KEY")

DEBUG = os.environ.get("DEBUG") != "False"

ALLOWED_HOSTS = [".vercel.app", ".now.sh"]

INSTALLED_APPS = [
    "whitenoise.runserver_nostatic"
     # Other apps ....
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # other apps ...
]


DATABASES = {
    'default': dj_database_url.parse(
        os.environ.get("DATABASE_URL"),
        conn_max_age=600,
        conn_health_checks=True,
    )
}

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles", "static")

After this is done, be sure to install the following packages in your project's environment.

• dj_database_url
• whitenoise
• psycopg2-binary

Ok your terminal/command prompt, run this command.

$ pip freeze > requirements.txt

Once that is done, push to github and then head over to vercel.

Create a new project and then import the project from your github. Once that's done, create the SECRET_KEY, DEBUG environment variables. Head over to ElephantSQL and create a database. Copy the database url and add it to your environment variables as DATABASE_URL.

Once that's done, click on the Deploy button and your project should display in less than 30secs. Head over to the provided domain and your side should be live. Let me know in the comment section if you faced any issue and I'll be glad to help.

Update Vercel recently updated their node version to 20.x so django does not currently work with that node version. You would probably get an ImportError message. To fix that issue, follow the steps below.

On your project homepage, similar to the one in the image below, click on settings.

From there, scroll to the bottom until you see Node.js version, change it to 18.x

That should be all unless you're doing something wrong then you should go through the tutorial again.