Deploying Django on Vercel with Vite, Tailwind and Django-Unfold

Deploying a Django app can be as easy as Next.js in Vercel. Based on the official Django template, I created a template that includes tools we use daily.

The project includes:

• Django-Vite: To handle static files with Vite and Tailwind CSS
• Django-Unfold: A modern and powerful admin panel
• Whitenoise: To serve static files in production

Vercel config File

Create this file in the root of your project:

vercel.json

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

This file defines two builds: one for the Django WSGI application and another to process static files through a custom script.

What does each section do?

• builds: Defines two build processes
  1. The first one configures the Django WSGI application using Vercel’s Python runtime
  2. The second one executes a custom bash script to compile assets and prepare the application
• routes: Redirects all requests to the Django WSGI application
• distDir: Specifies that compiled static files are located in staticfiles/

Build Script

This script automates the entire build process on Vercel:

build.sh

#!/bin/bash
set -e

echo "===================="
echo "STARTING BUILD PROCESS"
echo "===================="

echo "Step 1: Installing Python dependencies"
uv sync

echo "Step 2: Installing Node.js dependencies"
npm install

echo "Step 3: Building static files (npm run build)"
npm run build

echo "Step 4: Collecting static files"
uv run manage.py collectstatic --noinput --clear

echo "Step 5: Applying database migrations"
uv run manage.py migrate

echo "===================="
echo "✅ BUILD PROCESS COMPLETED SUCCESSFULLY"
echo "===================="

Deployment

Follow these steps to deploy your project:

1. Push your project to GitHub
2. Create a new project on Vercel
3. Select your repository
4. Select “Other” in framework preset
5. Add the necessary environment variables (check .env.example)
6. Deploy

Demo and source code

Check out the complete template on GitHub: django-starter