How to Deploy a Django web App on Vercel (For Free).

Hello forks ! 😁
Now that Heroku is terminating its free tier, Django developers need an alternative to deploy their Django / DRF web App to get it live !

In this post, I am going to show you how you can deploy your Django or Django rest framework project on Vercel in 7 easy steps.

Prerequisites:

• You Already have a working Django Project.
• You already have created a vercel account.
• You already have a requirements.txt file

  django
  djangorestframework

• Vercel does not provide support for dbsqlite3 currently, if you try to deploy your project with Django's default dbsqlite3 database then it's going to lead to an error. Ensure to comment out your dbsqlite database configuration or switch to a different database (e.g. PostgreSQL).

Alright, let's dive in !!

Step 1

In your projects root directory create a new file and name it build_files.sh then paste the code below inside it

# build_files.sh
pip install -r requirements.txt
python3.9 manage.py collectstatic --noinput

This file contains commands we want to run at build time on vercel

"pip install -r requirements.txt" ensures that all our installed packages declared in our requirements.txt file are downloaded and installed on the vercel server.

"python3.9 manage.py collectstatic --noinput" ensures that our static files are served on our server (ensure to add this line of code even if your static files are being served from an external website because our admin page contains some static files).

Step 2

In your projects root directory create a new JSON file and name it vercel.json then paste the code below inside it

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

Ensure to replace *<projectname>* with the actual name of your project name.

Under "builds", "src": "projectname/wsgi." points to the file that contains a WSGI application declaration that was created by Django for you in your projects directory.

"config": { "maxLambdaSize": "15mb", "runtime":"python3.9" } increases the size limit of our bundle (the default is 5MB), while runtime specifies the python version we want to use, in this case we are using python 3.9.

"routes": [ ... ] rewrites all routes ("src": "/(.*)") to our WSGI application ("dest": "projectname/wsgi.py") to be handled.

Step 3

Go to your projects setting.py and paste in the code below

STATICFILES_DIRS = [BASE_DIR/'static',]
STATIC_ROOT = BASE_DIR/'staticfiles'

Step 4

If you are using dbsqlite3 then comment it out like so. Since this is going to be a production environment, I highly recommend that you should switch to another database such as PostgreSQL.

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }
}

If you commented out your database as shown above (i.e, You app does not need a database to store anything), then skip this Step and Go to Step 5.

Step 4.5

But if you took my advice and switched to a different database (i.e, PostgreSQL), then run the following commands in your terminal

python manage.py makemigrations
python manage.py migrate

Creates a new migration and migrate your Django project to your database. This is needed for staticfiles to served on the vercel server.

Step 5

Next step is to go to your settings.py file and update your ALLOWED_HOST to permit vercel.app to be a valid hostname for your Django app, like so

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

Step 6

Go to your wsgi.py file created for you by Django in your project directory and paste in the line of code below

app = application

This will point the app variable that vercel is going to be looking for to your project.

Step 7

Finally, upload your code to a GitHub repo and connect your GitHub account with said repo to your vercel dashboard.

Import the project.

You can change the default project name to something else if you wish, but ensure to leave all other settings as default.

Then click on deploy and after a couple of seconds your project will be deployed successfully on vercel.

Finally, go to QuesMaker to see the example project on my GitHub page.

Conclusion

Following the steps above will get your Django or Django rest framework project hosted on vercel. As always thanks for reading, if you have any questions, thoughts or run into any error's following the steps above then leave a comment down below, and we'll try my best to help.

Comments

[Francisco Abalos]

what if my serverless function is 368.94mb
xD

[F.]

"routes": [ ... ] rewrites all routes ("src": "/(.*)") to our WSGI application ("dest": "projectname/wsgi.py") to be handled.

Could you explain this part in more detail?

[astaXmjy]

WARN! Due to builds existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: vercel.link/unused-build-settings

pls tell me how get rid of this