Introduction

Deploying a Django web application might sound like a complex task, but with the right approach, you can streamline the process and make it hassle-free. In this guide, we'll walk you through the steps to deploy your Django web app to Vercel, a platform known for its simplicity and speed. By the end of this tutorial, you'll have your Django app up and running on the web, ready for the world to see.

Step 1: Prepare Your Django App

Before deploying, ensure that your Django app is ready for production. Run your app in the local development environment, conduct thorough testing, and make any necessary adjustments. Update the settings to match your production environment, including setting DEBUG = False and configuring your domain name.

Step 2: Create a Github Account 

Visit the GitHub website, sign up with your details to create an account. GitHub will be the platform where you'll host and manage your Django project's code. Also, dont forget to upload your project to github.

Step 3: Create a Vercel Account

If you don't have a Vercel account, sign up at vercel.com. Vercel offers a free plan with generous features for small projects.

Step 4: Configure Django Project

Step 4.1: Configure Static Files

1. Inside your Django project's settings (settings.py), find the STATIC_URL and STATIC_ROOT settings.  Create if it's not already there.
2. Set STATIC_URL to the URL where your static files will be served, often /static/.
3. Set STATIC_ROOT to the absolute path where collected static files will be stored during deployment.

Example:

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

Step 4.2: Configure Media Files

1. In your project's settings, locate the MEDIA_URL and MEDIA_ROOT settings. Create if it's not already there.
2. Set MEDIA_URL to the URL where your media files will be served, typically /media/.
3. Set MEDIA_ROOT to the absolute path where uploaded media files will be stored.

Example:

MEDIA_URL = '/media/'
# MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

Step 4.3: Configure Database

1. In the settings file, find the DATABASES setting.
2. Specify the database engine, name, user, password, host, and port according to your database setup.
3.  Vercel does not support SQLite; therefore, you need to opt for a production-ready cloud database. I recommend considering options like Neon Postgres for a smoother experience.

Example using postgres:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': os.getenv('DB_NAME'),
        'USER': os.getenv('DB_USER'),
        'PASSWORD': os.getenv('DB_PASSWORD'),
        'HOST': os.getenv('DB_HOST'),
        'PORT': os.getenv('DB_PORT'),
    }
}

I'm using environment variables and you should too. It adds a layer of security and convience.

NOTE: If you're using PostgreSQL, use psycopg2-binary instead of psycopg, or else the build will fail. Additionally, ensure that you configure the database region closest to your Vercel region; otherwise, your app's performance will suffer.

Step 4.4: Apply Migrations

1. In your terminal, navigate to your project's directory.
2. Run python manage.py makemigrations to create migration files.
3. Run python manage.py migrate to apply migrations and set up the database.

Step 4.5: Configure project wsgi

Find file name wsgi.py which is located where setting.py is also located and add the follwing line:

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'neon.settings')
application = get_wsgi_application()

app = application # <- newly added

Step 4.6: Create Superuser (Optional)

To access the Django admin interface, create a superuser:

python manage.py createsuperuser

Follow the prompts to set a username, email, and password.

With these steps, you'll have configured static files, media files, and the database for your Django project. This lays a solid foundation for your project's deployment and functionality.

Step 5: Configure build files

• Open your code editor and create a new file named build.sh in your Django project root directory.
• In build.sh, add the necessary commands to build your Django app. This might involve running migrations, collecting static files, and any other pre-deployment tasks. Here's an example

#!/bin/bash

# Build the project
echo "Building the project..."
python3.9 -m pip install -r requirements.txt

echo "Make Migration..."
python3.9 manage.py makemigrations --noinput
python3.9 manage.py migrate --noinput

echo "Collect Static..."
python3.9 manage.py collectstatic --noinput --clear

Now in your Django project's root directory, create a vercel.json file. This file will contain the deployment configuration. Here's a sample configuration:

{
    "regions": ["syd1"],
    "builds": [
        {
            "src": "path/to/wsgi.py",
            "use": "@vercel/python",
            "config": { "maxLambdaSize": "15mb", "runtime": "python3.9" }
        },
        {
            "src": "build.sh",
            "use": "@vercel/static-build",
            "config": {
                "distDir": "./staticfiles"
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "path/to/wsgi.py"
        }
    ]
}

Replace "path/to/your/django/app" with the actual path to your Django app.

Now collect all the packages that your application is using to file named requirements.txt by running the following command:

pip freeze > requirements.txt

# this file is not for copying

asgiref==3.7.2
Django==4.2.3
django-ckeditor==6.5.0
django-cloudinary-storage==0.3.0
gunicorn==21.1.0
packaging==23.1
Pillow==10.0.0
psycopg2-binary==2.9.6 # <- Note that I'm using psycopyg2-binary instead
                       # of psycopg2 because psycopg2 will throw an error 
                       # on vercel while building and build will fail.
                       # If you're using postgres database, use this
python-dotenv==1.0.0
social-auth-app-django==5.2.0
sqlparse==0.4.4
typing_extensions==4.7.1
whitenoise==6.5.0

# Dont copy this

1. Go to vercel dashboard and click "Add New.."
2. Then click project and chose the project repository and click "Import"
3. Name your project and select Framework preset to "Other"
4. Configure environment variables if have any.
5.  Finally click Deploy!

Conclusion

Congratulations! You've successfully deployed your Django web app to Vercel. The platform's simplicity and speed make it an excellent choice for quickly getting your app online. Remember that deploying is just the beginning. Continuously monitor your app, apply security updates, and make enhancements to ensure a smooth user experience. Your Django app is now accessible to users around the world, showcasing your coding skills and creativity.