A short tutorial on how to deploy your Django project using Vercel hosting platform and Superbase databse intergration

Let's install essential packages such as&nbsp;WHITENOISE,&nbsp;GUNICORN, &nbsp;and PSYCOPG2-BINARY.
Whitenoise: static file serving middleware for Django, simplifies serving CSS, JavaScript, and images from your Django app. Enhances performance and security.
Gunicorn: A production-ready WSGI HTTP server for Python web apps, used to serve Django apps in a production environment, providing reliability and scalability.
Psycopg2-binary: Lightweight and standalone distribution of Psycopg2, simplifying installation in production and testing.&nbsp;
Make sure your virtual environment is activated, then run the following commands.
<pre class="language-markup"><code>pip install gunicorn whitenoise psycopg2-binary</code></pre>

Project Setup

Configuring a Django app to work with Whitenoise is a common step when deploying a Django application to serve static files efficiently. Here are the essential steps to configure your Django app to work with Whitenoise:
Update Django Settings:
Open your Django project's settings (typically found in <code>settings.py</code>) and make the following changes:
Add <code>'whitenoise.middleware.WhiteNoiseMiddleware'</code> to the <code>MIDDLEWARE</code> setting. This middleware is responsible for serving static files. Ensure it's placed above all other middleware, except for Django's SecurityMiddleware.
<pre class="language-python"><code>MIDDLEWARE = [
 # ...
 "django.middleware.security.SecurityMiddleware",
 "whitenoise.middleware.WhiteNoiseMiddleware", #newly added
 # ...
]</code></pre>
&nbsp;
Configure Whitenoise to serve your static files by adding the following settings to your <code>settings.py</code> just under the STATIC_URL.&nbsp;
<pre class="language-python"><code>STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"</code></pre>
The <code>STATICFILES_STORAGE</code> setting ensures that Whitenoise compresses and serves your static files efficiently.
The code <code>STATICFILES_STORAGE=</code> <code>"whitenoise.storage.CompressedManifestStaticFilesStorage" </code>in your Django <code>settings.py</code> file is not strictly necessary when using Whitenoise, but its inclusion is recommended for improved performance and reliability, especially in a production environment.

Configure whitenoise

Time to give your Django app a database boost with Supabase:
<ul>
<li>Get a Supabase Account: If you don't have one, head over to <a href="https://supabase.io/" target="_blank" rel="noopener">Supabase</a> and sign up using your Github account. Once in, create a new project.&nbsp;</li>
</ul>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/8f4a9074-e6f2-4fec-bee1-0394cc767a9c_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="1365" height="558">
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/7f59d81e-0520-4e56-8e0a-c54a76b0d9de_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="1365" height="375">
You will be prompted to create a new organization before you can create a project. I named mine benji.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/d2b94838-09ff-46d9-b7d8-f51a662fe616_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
Once you have created an organization you'll be directed to create a new project. You can name your project whatever you want. I named mine Django_superbase_test_db, and input a strong database password.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/5851f456-b610-4667-857d-eb61b7ceb1a6_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="1277" height="650">
You will be redirected to this page. You will have to wait for a few seconds for supabase to fully set up your project.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/1e227d0d-b979-4099-989b-7bd6c112bb4b_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="1361" height="599">

Create a Supabase account

<ul>
<li>Grab the Database Credentials: In your Supabase dashboard, click "Project settings" and then on the settings tab "Click on Database".&nbsp;</li>
</ul>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/dd94b4bd-67f5-45a7-b2bd-74abcac7c931_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="">
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/0332d74c-c94f-4d12-a70d-614c5123eacf_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="1317" height="625">
On the connection string section, click the URL tab then copy your database URL.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/d56a0f7c-af26-487f-9382-257d5631de60_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="1323" height="505">
Your Supabase database is good to go! Now, let's connect it to your Django app.

Grab Supabase credentials

First, import the os using the code block below
<pre class="language-python"><code>import os</code></pre>
In your settings.py file, replace the following SECRET_KEY, DEBUG, and ALLOWED_HOSTS&nbsp;with the code block below.
<pre class="language-python"><code>SECRET_KEY = os.environ.get('SECRET_KEY', '&lt;your-django-secret-key&gt;')
DEBUG = os.environ.get('DEBUG', 'True') == 'True'
ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', '127.0.0.1').split(",")
</code></pre>
Replace &lt;your-django-secret-key&gt; with the value of the SECRET_KEY variable.
As for DEBUG, the comparison&nbsp;env('DEBUG', 'True') == 'True' compares the retrieved value with the string&nbsp;"True".&nbsp;This comparison will be&nbsp;"True"&nbsp;if the value of the&nbsp;<code>DEBUG</code> in your Vercel environment variable is&nbsp;"True"&nbsp;and&nbsp;"False"&nbsp;otherwise.&nbsp;
Now add new environment variables named SUPABASE_DB_URL&nbsp; and DJANGO_ENV to determine which database to use in production or development and to control which version of the WSGI application is used respectively.
<pre class="language-python"><code>SUPABASE_DB_URL = os.environ.get("SUPABASE_DB_URL")</code></pre>
<pre class="language-python"><code>DJANGO_ENV = os.environ.get('DJANGO_ENV')</code></pre>
&nbsp;
The highlighted values below will be used in the development environment while a different set of values will be used in production through a .env file.
This is how this section of your settings.py file will look.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/91e14dce-2e17-410e-bfc4-b65c622e0d12_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="984" height="165">
&nbsp;

Environment variables

We're almost there! Time to link your Django app with Supabase:
Begin by installing dj-database-url. 📦💻. Please ensure you have your virtual environment active before installing this package.
<pre class="language-markup"><code>pip install dj-database-url</code></pre>
<code>dj-database-url</code>&nbsp;is a Django package that simplifies database configuration by allowing you to define your database settings in a single URL string, making it easier to manage your database connections, particularly in production and deployment environments.
Django Database Settings: In your Django settings (in <code>settings.py</code>). Make sure you import dj_database_url and we will set the&nbsp;database URL (provided by Superbase) as your database configuration.&nbsp;
<pre class="language-markup"><code>import dj_database_url
</code></pre>
For more info on the dj_database_url package read the <a href="https://pypi.org/project/dj-database-url/" target="_blank" rel="noopener">docs.</a>

Mixing Supabase with Django -1

In your settings.py file replace the default Sqlite3 database setup with the code block below.
<pre class="language-python"><code># Check if the Supabase database URL is set
if SUPABASE_DB_URL:
 # Use the Supabase database configuration
 DATABASES = {
 "default": dj_database_url.config(
 default=SUPABASE_DB_URL, conn_max_age=600
 )
 }
else:
 # Use the SQLite database configuration for development
 DATABASES = {
 'default': {
 'ENGINE': 'django.db.backends.sqlite3',
 'NAME': BASE_DIR / 'db.sqlite3',
 }
 }</code></pre>
With this approach:
We retrieve the Supabase database URL from the environment variable <code>SUPABASE_DB_URL</code>.
We check if <code>SUPABASE_DB_URL</code> has a value. If it's set, we configure the <code>DATABASES</code> to use the supabase database. If it's not set (or set to an empty value like <code>None</code>), we use the SQLite database configuration for local development.
This approach is more concise and directly uses the <code>SUPABASE_DB_URL</code> environment variable as a parameter for the <code>dj_database_url.config()</code> method, simplifying the configuration and making it easier to manage different databases seamlessly.
Your Django app is now all set up to use the Supabase PostgreSQL database. Exciting, right?

Mixing Supabase with Django -2

You&rsquo;ll need to configure a few aspects of your Django project before you can deploy it to Vercel.
<h3 id="configure-the-vercel-json-file">Step 1: Configure the vercel.json File</h3>
First, you need to create a vercel.json file in your project's root folder(where the manage.py file exists) to point Vercel to your app's web server gateway interface (WSGI):
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/7941a2cf-31f7-41ec-96cf-e91fd6718179_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="355" height="165">
Copy the code below into the file.
<pre class="language-python"><code>{
 "version": 2,
 "builds": [
 {
 "src": "django_app_name/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": "django_app_name/wsgi.py"
 }
 ]
 }</code></pre>
Replace&nbsp;django_app_name with your Django project name in two(2) places&nbsp;(the same as the folder that contains the settings.py file).
Here
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/f8547f72-e463-4c69-af74-bdd540eae13b_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
and here.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/0462100c-4868-42f2-910f-c42c63e0a5a2_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
&nbsp;
1. <code>"version": 2</code>: This indicates the version of the Vercel configuration file format. Version 2 is the latest version, which provides more advanced configuration options.
&nbsp;
2. <code>"builds"</code>: This is an array of build steps that define how your project should be built and deployed on the Vercel platform.
&nbsp;- <code>"src"</code>:<code> "django_app_name/wsgi.py"</code>: Specifies the source file that Vercel should use for the Python build step. It points to the WSGI (Web Server Gateway Interface) file of your Django project, which is the entry point for web requests.
-<code> "use"</code>: <code>"@vercel/python"</code>: Specifies the builder to use for the Python code. In this case, it uses the <code>@vercel/python</code>&nbsp;builder.
&nbsp; - <code>"config"</code>: This section contains configuration options for the Python builder.
&nbsp; - <code>"maxLambdaSize": "15mb"</code>: Sets the maximum size for the Lambda function that Vercel deploys. It limits the size to 15 megabytes.
&nbsp; - <code>"runtime": "python3.9"</code>: Specifies the Python runtime version to use, which is Python 3.9 in this case.
&nbsp;- The second build step,<code> "src": "build_files.sh"</code>is for handling static assets. It specifies a custom shell script for this build step.
&nbsp; - <code>"use": "@vercel/static-build"</code>: Specifies the builder to use for handling static assets. It uses the @vercel/static-build builder.
&nbsp; - <code>"config"</code>: This section configures the static assets builder.
&nbsp; - <code>"distDir": "staticfiles_build"</code>: Defines the directory from which static assets should be built and deployed. It uses the "staticfiles_build" directory.
&nbsp;
3. <code>"routes"</code>: This is an array of route configurations that determine how incoming requests are handled.
&nbsp; &nbsp; &nbsp; -<code> {"src": "/static/(.*)", "dest": "/static/$1"}</code>: Routes requests that start with "/static/" to the corresponding path within the deployment. The `$1` is a placeholder for the matched part of the URL.
&nbsp; &nbsp; &nbsp;- <code>{"src": "/(.*)", "dest": "django_app_name/wsgi.py"}</code>: Routes all other requests to the WSGI entry point, "django_app_name/wsgi.py," which is the main entry point for your Django application.
For more info read the <a href="https://vercel.com/docs/projects/project-configuration" target="_blank" rel="noopener">Vercel documentation</a>

Configure Vercel for Django -1

<h3 id="refactor-the-wsgi-py-file">Step 2: Refactor the wsgi.py File</h3>
Vercel doesn't recognize the&nbsp;application&nbsp;variable in the wsgi.py file. Thankfully, the only change you'll make to solve this problem is to pass the&nbsp;application&nbsp;variable into Vercel as&nbsp;app.
&nbsp;
Refactor the application variable in the wsgi.py with this code&nbsp;as shown:
<pre class="language-python"><code>if os.environ.get('DJANGO_ENV') == 'production':
 app = get_wsgi_application()
else:
 application = get_wsgi_application()
</code></pre>
With this approach:
<ul>
<li>If the <code>DJANGO_ENV</code> environment variable is set to <code>'production'</code>, it will use <code>app</code> for the WSGI application.</li>
<li>If <code>DJANGO_ENV</code> is not set or set to any other value, it will use <code>application</code>.</li>
</ul>
You can set the <code>DJANGO_ENV</code> environment variable differently in your local development and production environments to control which version of the WSGI application is used. This approach provides a clear and easy way to manage environment-specific configurations in your WSGI file.

Configure Vercel for Django -2

<h3>Step 3:&nbsp;Create a build_files.sh file in your project's root folder(where the manage.py file exists).</h3>
Include the code below in the file
<pre class="language-python"><code>pip install -r requirements.txt
python3.9 manage.py migrate
python3.9 manage.py collectstatic
</code></pre>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/973a2897-aa15-424c-b92b-b9693a900037_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
&nbsp;

Configure Vercel for Django -3

<h3>&nbsp;Add the STATIC_FILE directories to the settings.py file in the project_root folder.</h3>
Ensure you create a static folder(called static) in the project directory to store your static files eg: images, javascript, and CSS files before adding the code below.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/9b7a8e52-7ae6-46f8-8d23-a2c939950099_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="static folder" width="246" height="247">
<pre class="language-markup"><code>STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')</code></pre>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/0c4433a5-3a63-4638-b3f6-0a1f8e48096a_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="748" height="92">
In your Vercel configuration (<code>vercel.json</code>), you've specified how to handle static assets from your Django project. The specific line of code I'm referring to is:
<pre class="language-python"><code>{
 "src": "build_files.sh",
 "use": "@vercel/static-build",
 "config": {
 "distDir": "staticfiles_build"
 }
}
</code></pre>
&nbsp;
<code>"src": "build_files.sh"</code>: This line points to a shell script Vercel should run during deployment.
<code>"use": "@vercel/static-build"</code>: It tells Vercel to use the static assets builder for handling static files.
<code>"config": { "distDir": "staticfiles_build" }</code>: Here, you configure the <code>@vercel/static-build</code> builder by specifying the <code>"distDir"</code> parameter. This parameter indicates the directory from which static assets should be built and deployed. In this case, you've set it to "staticfiles_build".
&nbsp;
Now, let's relate this back to your Django project's settings:
In your Django project's <code>settings.py</code>, you have defined <code>STATIC_ROOT</code> as <code>os.path.join(BASE_DIR, 'staticfiles_build', 'static')</code>. This means that when the <code>collectstatic</code> command is run on Vercel as configured in the&nbsp;build_files.sh&nbsp;file, it will collect and store your static assets in the directory defined by <code>STATIC_ROOT</code>, which, in your case, is "staticfiles_build/static".
&nbsp; &nbsp; In your Vercel configuration, you've specified <code>"distDir": "staticfiles_build"</code> for the <code>@vercel/static-build</code> builder. This tells Vercel to look for static assets in the "staticfiles_build" directory, which aligns with the directory where Django collects its static assets.
&nbsp;
<h3>Add the STATIC directories to the project_root urls.py file</h3>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/fbebed75-cd4f-486a-8f4a-ef0f2d55d780_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="470" height="206">
Add the code below.
<pre class="language-python"><code>from django.conf import settings</code></pre>
<pre class="language-python"><code>urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code></pre>
&nbsp;

Add static_files configurations

<h3>Add the MEDIA directories to the settings.py file</h3>
<pre class="language-markup"><code>MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'</code></pre>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/a25db9af-049b-4d73-9659-600f6b8d1f4e_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="">
<h3>Then, add the MEDIA directories to the project_root urls.py file</h3>
<pre class="language-markup"><code>urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)</code></pre>
This is how your urls.py file should look.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/b95e3f53-a688-4b27-89ee-92a66f655cba_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="855" height="317">
&nbsp;

Add media_files configurations

This process involves pointing Vercel to your repository on GitHub. Once you&rsquo;ve done so, your app will be live, and anyone can access your website at a URL that Vercel generates.
<h3 id="create-a-requirements-file"></h3>
<h3 id="create-a-requirements-file">Step 1: Create a Requirements File</h3>
Vercel tries to find and install your project's dependencies inside the&nbsp;requirements.txt&nbsp;file during deployment. However, remember that writing dependencies from a&nbsp;<a href="https://www.makeuseof.com/create-manage-python-virtual-environments/" target="_blank" rel="noopener">virtual environment</a>&nbsp;into&nbsp;requirements.txt&nbsp;is always easier than from the global space.
Create a requirements.txt file in your project root folder using the following command via the terminal:
<pre class="language-python"><code>pip freeze &gt; requirements.txt</code></pre>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/71bba1aa-61d3-4951-948f-88f31abb041a_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="">
Ensure you remove the default package psycopg2 from your requirements.txt file. Vercel requires psycopg2-binary for DB interactions, not psycopg2!.
&nbsp;
<h3>Step 2:Push code to GitHub</h3>
Vercel works by tracking changes in a repository. So the first deployment step is to&nbsp;<a href="http://www.makeuseof.com/create-repository-github/">push your code to GitHub</a>&nbsp;or any other version control system that works best for you. Ignore this step if your code is already on GitHub.
Step 1: Initialize a Git Repository
<pre class="language-python"><code>git init</code></pre>
<h4>Step 2: Create and Add Files</h4>
Create and add files to your project directory.
Use the following command to stage your changes for commit:
<pre class="language-python"><code>git add .
</code></pre>
The <code>.</code> means you want to add all files and changes in the current directory to the staging area. You can also specify individual files if needed.
<h3>Step 3: Commit Your Changes</h3>
Commit your staged changes with a descriptive message:
<pre class="language-python"><code>git commit -m "Initial commit"
</code></pre>
Replace "Initial commit" with a brief description of your changes.
<h3>Step 4: Create a GitHub Repository</h3>
Go to the&nbsp;<a href="https://github.com/" target="_new">GitHub website</a> and log in or sign up for an account if you don't have one.
Click the "+" icon in the top-right corner and select "New repository".
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/e20e29d5-a243-4788-a42a-c7fd53688803_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="1363" height="624">
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/9439083c-eab5-42ea-a2b8-84adfb3f7f28_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="1363" height="337">Fill out the repository name, description, and other settings as desired.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/3904e1dc-01c4-49c9-a471-3548b46eb65c_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="896" height="657">Click the "Create repository" button.
<h3>Step 5: Link Your Local Repository to GitHub</h3>
On the GitHub repository page, you'll see instructions for linking your local repository to the remote repository on GitHub. It will look something like this:
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/e78266ba-da30-41eb-91bc-47b5ec6e06ce_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="1306" height="324">
<pre class="language-python"><code>git remote add origin https://github.com/yourusername/your-repo-name.git
</code></pre>
In your terminal, paste and run the code above. This command sets up the remote repository as "origin".
<h3>Step 6: Push Your Code to GitHub</h3>
Push your local repository to GitHub by running:
<pre class="language-python"><code>git push -u origin master
</code></pre>
<code>-u</code> sets up tracking, allowing you to use <code>git pull</code> and <code>git push</code> without specifying the remote and branch next time.
<code>origin</code> is the name of the remote repository you added in Step 5.
<code>master</code> is the default branch name. If you're using a different branch, replace it with the branch name you're working on.
<div id="adsninja-ad-zone-adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4" class="adsninja-ad-zone in-sticky-content">
<div id="dynamically-injected-refresh-ad-zone-adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4" class="dynamically-injected-refresh-ad-zone" data-original-ad-element-id="adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4" data-current-ad-element-id="adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4-count-1" data-refresh-count="2" data-prebid-not-bidding-count="0" data-floating-allowed="true" data-refreshing-allowed="true" data-next-ad-element-id="adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4-count-2">
<div class="ad-current">
<div id="ad-zone-container-adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4-count-1" class="ad-zone-container ad-zone-container-content-character-count-repeatable adsninja-ad-zone-container-with-set-height ad-zone-container-background-details-enabled ad-zone-container-loading-animation-enabled ad-loaded" data-no-fill-collapsable="false">
<div id="ad-zone-size-container-adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4-count-1" class="ad-zone-size-container ad-zone-size-container-content-character-count-repeatable">
<div class="ad-zone ad-zone-content-character-count-repeatable ">
<div class="ad-zone-inline ad-zone-inline-content-character-count-repeatable">
<div id="adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT4-count-1" data-google-query-id="CPzUh4O_6oEDFV3gKAUdGj4L7g"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Push code to your GitHub Repository

Connect Your Repository to Vercel

After importing the repository you will be redirected to this page.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/38b7cea9-1fb9-4bc0-89a4-255c70c49494_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
Step 1: Click the Environment Variables dropdown to list your environment variables on Vercel. These can include your app's secret key, database connection strings, etc.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/4c77b4ed-2984-4248-b73d-4fe8b833080e_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="888" height="292">
Step 2:Copy all the values in the code block below.
<pre class="language-python"><code>SECRET_KEY=&lt;your-django-scecret-key&gt;
DEBUG=False
ALLOWED_HOSTS=.vercel.app,now.sh,localhost,
SUPABASE_DB_URL=&lt;your-supabase-db-url&gt;
DJANGO_ENV=production</code></pre>
&nbsp;
&nbsp;Then paste the entire text in the key field. <img src="https://kowe.s3.amazonaws.com/media/uploads/content/0df549fc-4902-49ac-b118-6ba992569e13_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="">
Output:
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/61fc3cd0-4c5f-4798-841b-096325bd0d42_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="956" height="454">
Now run the code block below in your Terminal/CMD to generate a new&nbsp;SECRET_KEY:
<pre class="language-python"><code>python manage.py shell
</code></pre>
<pre class="language-python"><code>from django.core.management.utils import get_random_secret_key
print(get_random_secret_key())</code></pre>
Output:
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/b6107172-84cf-435c-9fc0-20ff9a8de0e7_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
Have your newly generated&nbsp;SECRET_KEY&nbsp;copied and replaced with the default &lt;your-django-secret-key&gt; value.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/6cd4c4d0-3ae5-4fb1-a7b5-318510017abe_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="">
Also, replace the entire [PASSWORD] variable in your supabase database URL with your supabase database password,&nbsp;and then replace the &lt;your-supabase-db-url&gt; value with your edited supabase database URL like this.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/d56a0f7c-af26-487f-9382-257d5631de60_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="1323" height="505">
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/d0a4dcdd-f343-43c2-a426-206472f41250_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="" width="825" height="94">
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/1595ba4a-5d1f-4adf-9228-c322c22216e0_9796a819-0354-4c10-aa15-98fa7e19490c.png" alt="" width="757" height="164">
Ensure all your environment variables are inputted before deployment.
&nbsp;
Step 3: Finally, click&nbsp;Deploy. Your app should be live in some moments. Click the URL to the right of the web icon to visit your new website.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/6013a571-61ea-4cf6-847e-e6c9d15c16f2_9796a819-0354-4c10-aa15-98fa7e19490c.jpg" alt="">
Once deployed, Vercel tracks subsequent changes pushed to the main branch to reflect them in the live version. Hence, you only need to push your changes to GitHub to update your app in real time.

Deploy your app to Vercel

<ul>
<li>Always, always back up your data.</li>
<li>As your project grows, think about adding authentication and security measures.</li>
<li>Keep an eye on Vercel and Supabase for the latest features and improvements. Stay ahead of the game!</li>
</ul>
Thanks for joining us on this journey. Best of luck with your Django projects on Vercel and Supabase! 🚀🐍
Get the full code <a href="https://github.com/Benji918/EasyPay" target="_blank" rel="noopener">here</a>

How to Deploy Your Django App on Vercel with a Supabase PostgreSQL Twist

Project Setup

30%

30%

Project Setup

Configure whitenoise

Create a Supabase account

Grab Supabase credentials

Environment variables

Mixing Supabase with Django -1

Mixing Supabase with Django -2

Configure Vercel for Django -1

Configure Vercel for Django -2

Configure Vercel for Django -3

Add static_files configurations

Add media_files configurations

Push code to your GitHub Repository

Connect Your Repository to Vercel

Deploy your app to Vercel

Extra Tips