Deploy your django app to Vercel.com

Vercel.com

Vercel is a cloud platform that enables developers to deploy websites and web services that deploy instantly, scale automatically, and require no supervision. It is a frontend-as-a-service (FaaS) platform that makes it easy to build, deploy, and scale web applications.

If you have project build with Django, and you went to deploy your Django app for free you can through to vercel.com. Just few step and your code is going online. How the step?

Prerequires:

1. Account Github
2. Account Vercel
3. Your Django App
4. file vercel.json
5. .env file
6. requirement.txt
7. Custom domain
8. PostgreSQL on Railway

• Step one. If you don’t have account Github before, create it and add the repositories to your Github account. Youtube add new repositories make sure it contains your django app to deploy.
• Step two. Going to the Vercel.com Signup/Login with Github account! (this important for take your repositories on Github) Done for creating account only. I will show you this part on last step. Now I will show you to how create simple Django app (blog version).
• Step three. Let’s create the Django project app open your VSCode or your text editor. Create folder (in mycase i rename “DEVSOE”). Open the folder on VSCode, open the terminal(ctrl+`) and type :

python -m venv venv

After creating the Virtualenvironment make sure the env has active with command:

venv/Scripts/activate

So let’s install the Django with the simple syntax on windows OS it’s look like this:

py -m pip install Django

Next create the Django project with command django-admin:

django-admin createproject mysite .

After “createproject” syntax rename mysite to according to your wishes. and the last shell I add ‘.’ it means you don’t wanna add new folder for your django project name. The directory will look like :

> DEVSOE
  v mysite
    __init__.py
    settings.py
    urls.py
    wsgi.py
  manage.py
  > venv

You done for creating django project, next step is create the django app with command below:

django-admin startapp blog

Django project & app

You have been create django app name is blog (ignore the static and templates folders for now). After done create django app next is setting your syntax. First add your app to settings.py file: mysite/settings.py

INSTALLED_APPS = [
    . . .
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
]

Add your app name in the last of INSTALLED_APPS=[]. Usually you can see it at lines 35–42

• Step four. Create your model you can copy this syntax below : blog/models.py

After model create and fill, don’t forget to migrate it on your terminal:

python manage.py makemigrations

python manage.py migrate

Oke now let’s edit the urls.py file. By default you just have one file urls.py you will see it in your django project directory (mysite), but I create one urls.py file on my django app. So create urls.py file on django app! and it look like this :

Add urls.py file on django app

And write this syntax below : blog/urls.py

and add the syntax for default urls.py file it’s in : mysite/urls.py

Well, let’s edit the view now : blog/views.py

Edit on admin.py file : blog/admin.py

Edit on apps.py file too : blog/apps.py

Collect your static file from django with this command :

python manage.py collectstatic

This syntax for import the static file from your django admin.

Create new Folder and give name ‘templates’ and you will see the last of all of directory and file look like this :

Django project app all file & directory

Now back to your settings.py file for add new folder for template will showing on your website, and add static folder with syntax below :

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

And in your directory templates after you create manually, create a number of html file :

templates/base.html

templates/index.html

templates/about.html

templates/contact.html

templates/post_detail.html

templates/sidebar.html

• Step five. Is add the Database for your django project app. I using PostgreSQL on this tutorial though the Railway app. If you don’t have account before create the account with Github too. Read my article on this step here!

Note :

On prerequires step 5 .env file you can read the my other article :

Intergrated and connect postgreSQL third party on railways for Django app

We continue to the file step for creating requirement.txt file. Don’t create it manually, just type on terminal :

pip freeze > requirements.txt

requirements.txt

Let’s push your django project app to Github. On the step one, clone your repositori and add your git remote. Type :

git add .

git commit -m "Add project"

git push -u origin main

For custom domain tutorial here .

Oke, last step back to Vercel.com and going to Dashboard page > add new project.

Vercel add project

and choice the project for importing from your github repositori. Click import > from configure project give name to your project, leave the others alone. You can read tutorial for this step here!

Congratulations, you have been upload your project and it going online.

See the full the syntax on my Github account: Github/soedarhanaINJ

And see the result of code: soedarhana.id