/wttd_django_start

Welcome to the Django - Course Repository - First project

Primary LanguageCSS

Django

This repository is a simple reference/tutorial like instruction for deploy a first time Heroku Django-based Project.

This project is currently running Here.


Activating Python venv & Install Django

Virtual Environments Docs

python -m venv .env_folder

source .env_folder/bin/activate

pip install django

Creating new Django Project

Django Docs

django-admin startproject mysite .  

Caution: the . above isn't required, but if already inside the root dir, do not skip it, or a nested folder will be created.

The django manage script located in the project root can be added as an alias to be reused anytime

source .env_folder/bin/activate

# the line bellow shows the venv path
echo $VIRTUAL_ENV

# to create a venv manager alias
alias manage="python $VIRTUAL_ENV/../manage.py"

First Start

Run the Dev Server

# ip and port not required if access happens from the same working machine
manage runserver 0.0.0.0:8000

CREATING FIRST DJANGO APP

Projects and Applications Docs

Creating first App

# inside project folder
manage startapp core

As result:

> tree ..
..
├── db.sqlite3
├── hellosite
│   ├── core
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── __init__.py
│   │   ├── migrations
│   │   │   └── __init__.py
│   │   ├── models.py
│   │   ├── tests.py
│   │   └── views.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── settings.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── wsgi.cpython-37.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Add App into main project

Append into 'INSTALLED_APPS' in settings.py

# ...
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "hellosite.core",  # <core app here>
]
# ...

Create a route

Add into 'urls.py' a view route pattern

# ...
import hellosite.core.views as views
# ...
urlpatterns = [
    path("", views.home),
    path("admin/", admin.site.urls)]
]
# ...

Create a view render

Also, include the view call inside the app views Template renderer docs

# ...
def home(request):
    return render(request, "index.html")
# ...

Make the view file

Create an index.html file inside the templates folder with some Lorem Ipsum content.

Structure will be like this:

tree ..
..
├── db.sqlite3
├── hellosite
│   ├── core
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── __init__.py
│   │   ├── migrations
│   │   │   ├── __init__.py
│   │   │   └── __pycache__
│   │   │       └── __init__.cpython-37.pyc
│   │   ├── models.py
│   │   ├── __pycache__
│   │   │   ├── admin.cpython-37.pyc
│   │   │   ├── __init__.cpython-37.pyc
│   │   │   ├── models.cpython-37.pyc
│   │   │   └── views.cpython-37.pyc
│   │   ├── templates
│   │   │   └── index.html
│   │   ├── tests.py
│   │   └── views.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── settings.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── wsgi.cpython-37.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Update using custom made template

If using other people custom templates, you can add it to your project apps

  • Create a custom static folder into your app directory and add the files
> tree hellosite/core

hellosite/core
├── admin.py
├── ...
├── static
│   ├── css
│   │   ├── ...
│   ├── fonts
│   │   ├── ...
│   ├── img
│   │   ├── ...
│   └── js
│       ├── ...
├── templates
│   └── index.html
└── ...
  • Load the template tag
{% load static %}
<!DOCTYPE html>
<html>
...
  • use the static template tag to build the URL. E.g.:
...
<link rel="stylesheet" href="{% static 'css/main.css' %}">
...
 <script src="{% static 'js/main.js' %}"></script>
...
<img class="img-responsive" src="{% static 'img/sponsor-silver-01.png' %}" alt="logo">
...

HINT = Using an editor, ReGex can be usefull to replace all old plain html to jinja-like template

(src|href)="((img|js|css).*?)"

into:

$1="{% static '$2' %}"

[Heroku] Release シン・ゴジラ

Install Heroku CLI following the instructions.

..and add Python-Decouple dependency.

> pip install python-decouple

Creating the .env variables document and extract them from current code

edit settings file and update environment variables like example:

...
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY="0ld_$ecr3t_K3y_V@lu3"  
...
DEBUG = True  # <- remove this line
...
...
SECRET_KEY = config('SECRET_KEY')
...
DEBUG = config("DEBUG", default=False, cast=bool)
...

Add these informations into a .env file (remember to remove quotes) and REMEMBER Do Not Version this file:

SECRET_KEY=0ld_$ecr3t_K3y_V@lu3
DEBUG=True

Also, add dj-database-url dependency, so Database can be decoupled from code either.

> pip install dj-database-url

...then, edit from:

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": os.path.join(BASE_DIR, "db.sqlite3"),
    }
}

Into:

default_dburl = f"sqlite:///{os.path.join(BASE_DIR, 'db.sqlite3')}"

DATABASES = {
    "default": config("DATABASE_URL", default=default_dburl, cast=dburl),
}

To Django respond requests inside Heroku, we need to allow into host:

ALLOWED_HOSTS = ["*"]

Finally, configuration for serving python static content in heroku:

> pip install dj-static
  • Update the settings file:
...
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
  • update the wsgi file
...
from dj_static import Cling
...
application = Cling(get_wsgi_application())
...
  • Make a file requirements.txt and append python packages.
> pip freeze > requirements.txt

Also, include two production only packages:

gunicorn and psycopg2


Deploying Site into Heroku

App Creating and Build packs Documentations

  • Check for a folder (.git/). It means already repository was configured, otherwise, init it.
> git init
> git add .
> git commit -m 'first commit'

Then:

> heroku apps:create hello-events-app --buildpack heroku/python
  • check if app is running
> heroku open -a hello-events-app
  • set config variables into heroku workspace
> heroku config:set -a hello-events-app SECRET_KEY='0ld_$ecr3t_K3y_V@lu3'
> heroku config:set -a hello-events-app DEBUG=True
  • Add heroku to your git remote (If it's not already)
> heroku git:remote -a hello-events-app
  • Concluding, Upload the content to heroku
> git push heroku master --force

Check Application

To check the log from your online application, In your terminal run:

> heroku logs --tail

Mind the Yellow Pages (Error 404)

On Heroku hosting, remember to set Django Debug == False to avoid it display 404 pages with debugging content and just show plain not found page instead.

> heroku config:set -a another-events-app DEBUG=False