Django on Vercel in 30 minutes

The plan

  1. Set up a barebones Django application
  2. Install the Vercel command line tools
  3. Configure the project for Vercel
  4. Deploy!

1. Set up a barebones Django application

For the sake of example, we’ll work with what Django gives us out of the box with just a few small additions.

Start a new Django project

$ mkdir vercel-django-example
$ cd vercel-django-example
$ pip install Django
$ django-admin startproject vercel_app .

Add an app to the project

$ python manage.py startapp example

Add a view and route

Within the example app create a single view and route so that you have a page to load when visiting the site on Vercel.

Check your progress

With the work so far, your Django app should display your view when visiting the root URL. You can test with the local development server:

$ python manage.py runserver

Install the Vercel command lines tools

Although it’s possible to use Vercel without using the CLI (e.g., through the GitHub integration) — starting new projects from the command line is by far the easiest to get up and running.

$ yarn add global vercel
$ vercel login

Configure the project for Vercel

There are three chores to take care of before you’re ready for deployment: adding a Vercel configuration, fixing some settings, and listing our dependencies.

Add a Vercel configuration file

First, add a Vercel configuration file, vercel.json, to the root of your project:

  1. Under "builds", "src": "vercel_app/wsgi." points to the file that contains a WSGI application declaration (Django created it for you).
  2. "use": "@ardnt/vercel-python-wsgi" tells Now to use the @ardnt/vercel-python-wsgi builder. The latest version of the builder will be installed from NPM when you deploy our project during the build step.
  3. "config": { "maxLambdaSize": "15mb" } increases the size limit of our bundle (the default is 5MB) — this may not be necessary, but Django is a large package, so it saves a headache if size becomes an issue. Feel free to experiment with the appropriate upper limit.
  4. "routes": [ ... ] rewrites all routes ("src": "/(.*)") to our WSGI application ("dest": "now_app/wsgi.py") to be handled.

Update your Django settings

Next, you’ll need to adjust two Django project settings.

Enumerate dependencies

Finally, you’ll need to list out dependencies in a requirements.txt file so that the builder knows what to install for you before deploying.

Deploy!

A little bit of configuration pays big dividends for your next step. To get a live working version of your app, all you need to do is run:

$ vercel
$ vercel
Vercel CLI 21.3.3
? Set up and deploy “vercel-django-example”? [Y/n] y
...
? In which directory is your code located? ./
...
✅ Production: https://vercel-django-example.vercel.app [copied to clipboard] [29s]

Why not use the official Python Vercel runtime?

There is a Python builder/runtime maintained by the Vercel team. It’s a very similar implementation and has ASGI support which may be interesting for some projects.

  1. The Vercel Python runtime/builder is highly opinionated about the file structure of a project — I want to be able to name files and folders in a way that helps myself and other developers, instead of being required to use Vercel’s convention.
  2. ASGI support is interesting, but irrelevant for serverless implementations of Django — Serverless implies 1 request = 1 isolated compute unit. A serverless invocation won’t be handling large volumes of requests. Django is synchronous under the hood, so switching to ASGI doesn’t gain performance on serverless architectures.

Now vs. Vercel

This guide is a nearly 1-for-1 replica of the same guide for Now. For the time being, the builder conventions that worked on Now still work on Vercel and this guide will get you up and running quickly.

Further reading

Check out these other resources that might be helpful to you:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store