Deploying a Django App on Vercel for Free: A Complete Step-by-Step Guide

Deploying your Django project to Vercel is a great way to use Vercel’s easy-to-use platform and fast global CDN. This tutorial will guide you through deploying a Django application on Vercel for free, including setting up static file serving using Whitenoise. With this guide, you’ll get your Django app running in no time!

Prerequisites

Before we begin, make sure you have the following:

• A Django project on your local machine

• A Vercel account (You can sign up for free at vercel.com)

• Python 3.x installed

• Git installed

Step 1: Set Up Your Django Project for Vercel

First, you need to ensure your Django project is structured properly for deployment.

1.1. Update settings.py

In your Django project’s settings.py, make the following changes to configure it for deployment:

• Allowed Hosts: You need to include Vercel’s domain in the ALLOWED_HOSTS setting.

ALLOWED_HOSTS = ['.vercel.app', 'localhost']

• Static Files: Set up static files so Django can serve them properly.

STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

These settings will enable Django to serve static files and ensure it works correctly on Vercel.

1.2. Install Dependencies

Make sure you have a requirements.txt file that includes all your project’s dependencies. If you don’t have one yet, you can create it with:

pip freeze > requirements.txt

This file will be used during the deployment process to install your project’s dependencies on Vercel.

Step 2: Add Whitenoise to Serve Static Files

To serve static files in production, Django requires a static file server. Whitenoise is a popular option because it eliminates the need for an external web server like Nginx, making it ideal for platforms like Vercel.

2.1. Install Whitenoise

First, install Whitenoise by running the following command:

pip install whitenoise

Then, update your requirements.txt to include Whitenoise:

pip freeze > requirements.txt

2.2. Configure settings.py for Whitenoise

Now, update your settings.py to add Whitenoise for static file management.

• Add 'whitenoise.middleware.WhiteNoiseMiddleware' to the top of your MIDDLEWARE list, right after 'django.middleware.security.SecurityMiddleware':

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

• Configure the STATICFILES_STORAGE to use Whitenoise’s storage backend, which will compress and cache static files for better performance:

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

This ensures that Whitenoise will handle your static files in production.

Step 3: Create the vercel.json Configuration

You’ll need a vercel.json file to tell Vercel how to handle the deployment of your Django project. Create a vercel.json file in the root directory of your project with the following content:

{
  "builds": [
    {
      "src": "backend/wsgi.py",
      "use": "@vercel/python"
    },
    {
      "src": "build_files.sh",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "staticfiles"
      }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "backend/wsgi.py"
    }
  ]
}

This configuration specifies that Vercel should use Python to run your Django app and handle static files by using the build script we’ll create next.

Step 4: Create the build_files.sh Script

Next, you need a build script that Vercel will run during deployment to install dependencies, run migrations, and collect static files. Create a file build_files.sh in the root directory of your project with the following content:

#!/bin/bash
echo "Installing pip if required..."
python3 -m ensurepip --upgrade
python3 -m pip install --upgrade pip
echo "Building the project..."
python3 -m pip install -r requirements.txt
echo "Make Migration..."
python3 manage.py makemigrations --noinput
python3 manage.py migrate --noinput
echo "Collect Static..."
python3 manage.py collectstatic --noinput --clear

This script does the following:

• Ensure pip is installed and upgraded.

• Installs all dependencies from the requirements.txt file.

• Runs database migrations.

• Collects all static files and places them in the staticfiles directory.

Step 5: Organize Your Django Project

For the purposes of this tutorial, we’ll assume your Django project is inside a backend directory. Your project structure should look something like this:

/my-django-project
  ├── backend/
  │   ├── manage.py
  │   ├── myapp/
  │   ├── settings.py
  │   ├── wsgi.py
  ├── staticfiles/  (Generated during deployment)
  ├── requirements.txt
  ├── vercel.json
  ├── build_files.sh

Ensure that backend/wsgi.py is the entry point for your Django application.

Step 6: Deploy Your Django Project to Vercel

Now that your project is ready, you can deploy it to Vercel.

6.1. Install Vercel CLI

If you haven’t already installed Vercel’s CLI, do so by running:

npm i -g vercel

6.2. Deploy Your Project

In your terminal, navigate to your project’s root directory and run:

vercel

Vercel will guide you through a series of setup questions. When prompted:

• Link to your Vercel account.

• Select the correct project scope (personal or team).

• Choose “Other” for the framework preset.

After setup, Vercel will begin deploying your project automatically.

Step 7: Check Your Deployment

Once the deployment is complete, Vercel will give you a URL in the format your-project-name.vercel.app. Visit this URL to verify that your Django app is up and running!

Step 8: Add Environment Variables (Optional)

If your Django app uses environment variables (such as SECRET_KEY or database credentials), you can set them in the Vercel dashboard:

1. Go to your project’s page on Vercel.

2. Navigate to Settings > Environment Variables.

3. Add the required environment variables (e.g., DEBUG, SECRET_KEY, DATABASE_URL).

Step 9: Set Up a Custom Domain (Optional)

Vercel provides a free .vercel.app domain for your project, but you can also set up a custom domain if needed. Go to the Domains section of your project’s settings, add your custom domain, and follow the DNS setup instructions.

Conclusion

Congratulations! You’ve successfully deployed your Django project to Vercel for free. By using Whitenoise, your Django app efficiently serves static files without needing an external server, which makes the deployment process smoother. With Vercel’s platform, you get quick and easy deployments combined with fast global distribution.

Now you can focus on building your app while Vercel takes care of scaling and deployment!

Happy coding!

✉️ Subscribe for more builds like this

📬 Join hundreds of devs mastering software engineering by building, breaking, and shipping real software.