How to Deploy a Django web App on Vercel (For Free).
Tags: django, webdev, tutorial, beginners
Published: 2022-08-28 10:12:00

Hello forks ! 😁
Now that [Heroku](heroku.com) 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**](https://vercel.com/) 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](https://www.postgresql.org/)**).

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

```sh
# 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

```json
{
  "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

```py
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.

```py
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-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

```py
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
```py
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

```py
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](https://github.com/keshav-xebia/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.