How to deploy a django project with staticfiles on vercel

 In this post I am going to show you how you can deploy your django or django rest framework project on vercel in 9 easy steps.

Please note

• For this post I am assuming that you have setup your django project.
• This process works on django framework and django restframework projects.
• And also for my project databse I am using postgres_db.
• Vercel does not provide support for dbsqlite3 currently, if you try to deploy your project with django's default dbsqlite3 database then its going to lead to an error. Ensure to comment out your dbsqlite database configuration or switch to a different database (e.g postgreSQL).

Alright lets begin;

Step 1

In your projects root directory create a new file and name it build_files.sh then paste the code below inside it

# build_files.sh
pip install -r requirements.txt
python3.9 manage.py collectstatic

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 is downloaded and installed on the vercel server.

"python3.9 manage.py collectstatic" ensures that our static files are served on our server (ensure to add this line of code even if your staticfiles 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

{
  "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_build"
      }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "projectname/wsgi.py"
    }
  ]
}

Ensure to replace projectname with the actual name of your project.

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

STATICFILES_DIRS = os.path.join(BASE_DIR, 'static'),
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')

Step 4

Create an empty folder and name it static in your projects root directory (this is where all our static files will be stored). 

Next update your project's urls.py by pasting in the configuration settings below after urlpatterns=[ ];

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Your project's urls.py should resemble the one shown below;

# your imports
urlpatterns = [
    #url paths
    
    
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Step 5

If you are using dbsqlite3 then comment it out like so. Since this is going to be a production enviroment I highly recommend that you should switch to another database such as postgreSQL.

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }
}

Step 6

If you commented out your database as shown above then skip this step.

But if you took my advice and switched to a diffrent database then run the following commands in your terminal

python manage.py makemigrations
python manage.py migrate

Creates a new migration and migrate your django project to your database. This is to needed for staticfiles to served on the vercel server.

Step 7

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

ALLOWED_HOSTS = ['.vercel.app', '.now.sh']

Step 8

Go to your wsgi.py file created for you by django in your peoject directory and paste in the line of code below

app = application

This will point the app variable that vercel is going to be looking for to your project.

Step 9

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 this link to see the example project on my github page.

Ps. Checkout the link below to learn how you can add a free postgreSQL database for your project.

Hosting PostgreSQL database on Supabase for free (devmaesters.com)

If you are migrating your django site from one platform(e.g heroku) to another platform (e.g vercel) then checkout the link below to learn how you can migrate your postgreSQL database to supabase for free.

Migrating your PostgreSQL database from one hosting platform to another (e.g Heroku to Supabase) (devmaesters.com)

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 I'll try my best to help.