Hi, in this tutorial you will learn how to deploy a Django Web App on Render. It is super easy.

Let's go.

🛠️ Let's install essential packages such as DJANGO, WHITENOISE, GUNICORN, and&nbsp;PSYCOPG2&nbsp;now.
&nbsp;
DJANGO: 🐍 Django powers our project. When installing, stick to Django 3.2.1 or below. Render doesn't support versions beyond that. 🚫⬆️
GUNICORN:&nbsp; 🚀 Gunicorn's main role in Django deployment is bridging the web server 🌐 and your Django app 🐍, ensuring smooth production operation. 🌟
WHITENOISE: 📦&nbsp;WhiteNoise is a Django middleware that serves static files efficiently and securely in a Django web application during deployment
PSYCOPG2: 🐘 Psycopg2 is a database adapter for Django that helps your Django application connect and interact with a PostgreSQL database. It serves as the bridge 🌉 between Django and PostgreSQL, enabling data storage and retrieval with ease.
&nbsp;
Make sure your virtual environment is activated, then run the following commands.
<pre class="language-python"><code>pip install django==3.2.1</code></pre>
<pre class="language-python"><code>pip install gunicorn whitenoise psycopg2</code></pre>
&nbsp;
&nbsp;
&nbsp;

Project Setup

🔧 Let's set up our staticfiles for production.
Staticfiles consist of your CSS, JavaScript and images.
&nbsp;
🔧📝 Open your settings.py file and insert WhiteNoise into the MIDDLEWARE list, ensuring 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;
Still in your settings.py file in the staticfiles region, add the code block just under the STATIC_URL.&nbsp;
<pre class="language-python"><code>STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"</code></pre>
STATIC_ROOT&nbsp;represents the folder that will contain all your staticfiles in production.
STATICFILES_STORAGE&nbsp;helps with compressing and caching support.

Staticfiles

🛠️ To set up multiple commands for your project's deployment, create a new file called build.sh in your repo's home directory same directory where we have the manage.py file. Render will execute this script during the deployment of our Django app.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/6e5cafd9-d41a-412d-9be1-6b9bed1f288c_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="639">
&nbsp;
In the&nbsp;build.sh&nbsp;file the code snippets below represent the content of the file.
<pre class="language-python"><code>#!/usr/bin/env bash
# exit on error
set -o errexit

pip install -r requirements.txt

python manage.py collectstatic --no-input
python manage.py migrate</code></pre>

The Build Command

📋 The requirements.txt file in a Django project lists all the 📦dependencies needed for the project to run.
&nbsp;
Run the code block below in your project's terminal to list all the dependencies required for your project to run, make sure you have your virtual environment activated.
<pre class="language-python"><code>pip freeze &gt; requirements.txt</code></pre>
&nbsp;
The command above will create a new file called "requirements.txt" in the same directory as your manage.py file. The newly created file will contain all the dependencies for your project to run.
&nbsp;
NOTE:&nbsp;Whenever you install a dependency e.g whitenoise, pillow etc, always make sure to run the code block above in order to update the requirements.txt&nbsp;file.
&nbsp;
Lastly, 🪣 create a 🆕 Git repository, and then 🚀 push your code to your remote repository.

Requirements file

🚀 To get started, first, head over to <a href="https://render.com/" target="_blank" rel="noopener">Render</a> and create your Render account. Once you've successfully signed up, proceed to create a new web service. 🌐✨
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/8481e3dc-c96c-4baa-9c9e-d3eb2a5e928c_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="536">

Sign up for a Render account!

🔓💼 Once you're logged in, simply click on the 📊 "DASHBOARD" button in the top right corner.
In your "DASHBOARD"&nbsp;click on the "NEW WEB SERVICE" button to create a new web service.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/119b5e1e-7a14-43ee-a26b-de91f856ee08_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1362" height="530">
&nbsp;
Leave the default settings and click the&nbsp;"NEXT"&nbsp;button to continue.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/db4977cd-70ad-40be-a129-091051d898db_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1013" height="576">

Create a new web service.

🔗 Now, let's link Render with your GitHub repository.
&nbsp;
Click the highlighted button below.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/f2d0f4df-9c31-42ad-a90e-f60e6d995877_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1365" height="514">
&nbsp;
Choose your preferred account.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/6f9c9a5b-b975-4ceb-9858-ac6fb1c0fa6d_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1009" height="571">
&nbsp;
Select the repository you intend to deploy and click the "SAVE" button.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/532093f9-843f-41ef-ae42-823009ccae2a_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">

Connect to GitHub

🔧After you have clicked the&nbsp;"SAVE"&nbsp;button from Step 7, you will be redirected to the pages on Step 6, follow the instructions on Step 6 and you will be redirected to the page below.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/d4cb1754-da19-4970-8cf6-190048167104_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="536">
After clicking on the&nbsp;"Connect"&nbsp;button you will be redirected to this page. Fill the form and leave the part tagged&nbsp;"OPTIONAL"
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/7d420c97-8d15-41fd-9c72-873fd50e575f_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1023" height="605">
&nbsp;
As for the&nbsp;"Start Command"&nbsp;section below, the value of the input field should be&nbsp;"gunicorn name_of_project.wsgi"&nbsp;where "name_of_project" represents the folder that contains your settings.py file.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/05e27112-f226-470c-9601-42e240c38d96_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1336" height="221">
&nbsp;
As for the&nbsp;Build Command&nbsp;replace the content of the input field with the code below.
<pre class="language-python"><code>sh build.sh</code></pre>
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/81bae943-b179-4bc0-b7be-376f1d83b390_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1352" height="257">
Remove <code>pip install -r requirements.txt</code> and add <code>sh build.sh</code>
&nbsp;
&nbsp;
Choose the free tier and then click the&nbsp;"Create Web Service"&nbsp;button.

Render Setup -1

🔧After you have clicked on the "Create Web Service"&nbsp;button. Render will start the process of building and deploying your web app, but you will be faced with an error and this has to do with the&nbsp;"ALLOWED_HOSTS".
The highlighted part below represents the domain of your web app on Render, you must add this new domain to your "ALLOWED_HOSTS" in your settings.py file.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/53e1f61f-3861-47ee-940e-6700934c6ca9_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1364" height="511">
Replace the "ALLOWED_HOSTS" in your settings.py file with the code block below.
<pre class="language-python"><code>ALLOWED_HOSTS = ['127.0.0.1', 'localhost', 'ovoting.onrender.com']</code></pre>
Note:&nbsp;Please update 'ovoting.onrender.com' to your app's URL (without the "https://").
&nbsp;
Once you have updated your settings file, push your code to GitHub again.
&nbsp;

Render Setup -2

🔄 After you've updated your GitHub repo, it's time to prompt Render to initiate a redeployment of your web app. 🚀🌐
&nbsp;
Click the&nbsp;"Manual Deploy"&nbsp;dropdown and select&nbsp;"Deploy latest commit"&nbsp;to prompt Render to redeploy your web app.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/a5140fb4-b89c-4b22-a650-3973f377b8c7_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1354" height="508">
&nbsp;
🚀 After Render completes the deployment of your web app, your application should be up and running! 🌐✨
&nbsp;
Click the highlighted section to view your app on a Live url.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/53e1f61f-3861-47ee-940e-6700934c6ca9_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">
&nbsp;
View&nbsp;Logs.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/675eb86d-94cf-41ac-a4e5-3f01c781f465_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="532">
📝 On platforms like Render, "logs" are your application's recorded activities. They include errors, performance details, and security events. These logs help with troubleshooting, performance monitoring, security, and historical analysis, making them crucial for maintaining a healthy application. ⚙️🔍🛡️

Render Setup - 3

⏳🔧 Let's move on to configuring your PostgreSQL database now.
&nbsp;
Click the&nbsp;"NEW"&nbsp;button then select&nbsp;"PostgreSQL"&nbsp;in the dropdown.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/3fec09d6-89a3-4194-9c44-a1d47ded4ee7_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="617">
&nbsp;
Fill up the form, select the free tier, and click on the "Create Database"&nbsp;button to continue.
When you are done clicking the "Create Database"&nbsp;button, wait a few seconds to get your database created.&nbsp;
🟢 When your database status reads "Available", it signifies that the database has been successfully created and is now prepared for use. 🚀🔵<img src="https://kowe.s3.amazonaws.com/media/uploads/content/eb8e7199-752b-42f6-b83d-c8dba997292d_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1352" height="617">
&nbsp;

Postgres DB Setup - 1

📜👀 Scroll down the page you are currently on to access your database settings. You'll need these configurations to configure your Django app.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/a5cb9253-ef16-48d0-8854-289d5bac4fa7_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1348" height="609">
&nbsp;
🔐 With the database successfully created, it's time to connect it to your Django project.

Postgres DB Setup - 2

🛠️ Once your database is set up, it's time to establish a connection with your Django project in the settings.py file.
🔗 Head over to your codebase and let's make the necessary connections.
&nbsp;
🔧 Begin by installing dj-database-url. 📦💻
<pre class="language-python"><code>pip install dj-database-url</code></pre>
After installing dj-database-url, make sure to update your requirements.txt with the command below.
<pre class="language-python"><code>pip freeze &gt; requirements.txt</code></pre>
&nbsp;
🔌 Various methods exist to link your database to your app's project. In this tutorial, we'll utilize the external connection URL approach.
Navigate to your Render database settings copy the External Database URL and save it somewhere, it will be used later. 📂🔗
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/f7f6a855-e2fa-45a7-b3c3-a24455317684_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="556">
&nbsp;
📥 Now, in your settings.py, make sure to import os and dj_database_url and we will set the external database URL (provided by Render) as your database configuration. 🌐🔗
<pre class="language-python"><code>import dj_database_url
import os</code></pre>

Connect Database -1

Now, we'll employ an&nbsp;"if" condition to toggle between utilizing Sqlite3 or Postgres as our database of choice. 📊🔀
&nbsp;
In your settings.py file replace the default Sqlite3 database setup with the code block below.
<pre class="language-python"><code>if not DEBUG:
 DATABASES = {
	"default": dj_database_url.parse(os.environ.get("DATABASE_URL"))
}
 
else:
 DATABASES = {
 'default': {
 'ENGINE': 'django.db.backends.sqlite3',
 'NAME': BASE_DIR / 'db.sqlite3',
 }
}
 
 </code></pre>
👩&zwj;💻 In our development environment, set DEBUG to True, but in production, it should be False. When DEBUG = False, our Django project will utilize the 🐘 Postgres database, while when DEBUG = True, it will use the 📁 Sqlite3 database.
&nbsp;
<pre class="language-python"><code>if not DEBUG:</code></pre>
NOTE:&nbsp;The code block above is equivalent to&nbsp;DEBUG = False
&nbsp;
📸 The image below is a snapshot of the first code block. It highlights the DATABASE_URL, which will be an essential environment variable on Render, storing the External Database Url. Thanks to the magic of the 🧙&zwj;♂️ dj_database_url package, which configures our database credentials efortlessly, streamlining the setup process. 🌐🔑
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/f3ad7392-45d8-43e5-9f8e-2822689e0842_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">
&nbsp;

Connect Database -2

🔐 It's time to shield sensitive information in our Django project!
In your settings.py file, replace the following SECRET_KEY, DEBUG, ALLOWED_HOSTS&nbsp;with the code block below.
<pre class="language-python"><code>SECRET_KEY = os.environ.get('SECRET_KEY', 'django-insecure-g=jzhv5zv8nxar2z0jpv#jv-$o*p(+e597*wgkau$gc&amp;7v*m4e')
DEBUG = os.environ.get('DEBUG', 'True') == 'True'
ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', '127.0.0.1').split(",")
</code></pre>
&nbsp;
As for&nbsp;DEBUG, the comparison os.environ.get('DEBUG', 'True') == 'True'&nbsp;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 Render environment variable is "True"&nbsp;and&nbsp;"False"&nbsp;otherwise.
&nbsp;
Remember, you already imported os in the previous section.
&nbsp;
The highlighted values below will be used in the development environment, while in production different set of values will be used.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/0444bf79-db5c-4873-8813-de90c59190d8_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1228" height="360">
Run the code block below in your Terminal/CMD to generate a new&nbsp;SECRET_KEY:
<pre class="language-markup"><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>
Have your newly generated&nbsp;SECRET_KEY&nbsp;copied and saved somewhere safe, you will need it in the next section.

Environment Variables -1

👉 Navigate to your Render dashboard, where you'll spot two services: one representing your web app 🌐 and the other symbolizing your Postgres database 🗃️. Select the web app.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/1df447af-7d10-4e85-9aae-9c7088349106_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">
&nbsp;
On the next page select Environment&nbsp;on the left navigation bar.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/c6e34927-ece9-4d2e-b75f-96794d898397_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="533">
&nbsp;
You can go ahead and start adding your environment variables.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/2a2d8883-f00b-4e17-a197-fd4b69a8f32f_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="" width="1366" height="533">
&nbsp;
I have added my environment variables on Render.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/c1336a21-35ca-4d63-8cd3-7f03b96c7d05_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">
<ul>
<li>Your SECRET_KEY&nbsp;for production was generated in the last section.</li>
<li>DEBUG should be set to False&nbsp;in production</li>
<li>ALLOWED_HOSTS&nbsp;is your Render domain name without "https://"</li>
<li>DATABASE_URL&nbsp;is your External Database URL, It was gotten when we created our Postgres database on render (STEP 13).</li>
</ul>
Once you are done adding the environment variables click on the Save Changes button.

Environment Variables -2

🔄 Finally, remember to 🔄 update your GitHub repository and then 🚀 redeploy your web app on Render.
&nbsp;
Once you are done updating your Git repository, redeploy your web app.
<img src="https://kowe.s3.amazonaws.com/media/uploads/content/ccae6d0f-21f7-4ba4-97ec-c161f6d4cf18_5d9bf117-01b0-42ec-9338-5c703b924c40.png" alt="">

How to Deploy a Django App on Render

Project Setup

30%

30%

Project Setup

Staticfiles

The Build Command

Requirements file

Sign up for a Render account!

Create a new web service.

Connect to GitHub

Render Setup -1

Render Setup -2

Render Setup - 3

Postgres DB Setup - 1

Postgres DB Setup - 2

Connect Database -1

Connect Database -2

Environment Variables -1

Environment Variables -2

Conclusion