Pengenalan Django, Inertia, Vue.js
Pada tutorial ini kita akan belajar mengintegrasikan antara framework Django dan Vue.js dan menghubungkannya menggunakan sebuah package/library yaitu Inertia. Django sendiri adalah framework yang dibangun menggunakan bahasa pemrograman python dan dikhusukan untuk membuat sebuah aplikasi web maupun sebuah layanan rest API. Sedangkan Vue.js merupakan framework javascript yang digunakan untuk membangun web user interface secara interaktif. Secara sederhana bisa dikatakan Django berjalan di sisi server sedangkan VueJS pada sisi client.
Biasanya ketika kita membangun aplikasi dengan Django dan Vue.js maka kita akan membuat dua aplikasi yang terpisah. Semisal kita akan membuat rest API terlebih dahulu dengan Django dan kemudian kita akan membangun web user interface nya dengan Vue.js yang akan meng-consume rest API yang sudah dibuat tersebut. Nah terkadang hal itu akan merepotkan jika aplikasi yang kita buat scopenya tidak terlalu besar. Maka alih-alih membuat dua aplikasi terpisah, maka kita bisa membuat satu aplikasi dengan bantuan sebuah library bernama Inertia. Inertia dapat digunakan untuk membangun SPA (single page application) tanpa membangun API atau biasa disebut dengan istilah monolith app. Bisa dikatakan Inertia ini sebagai penghubung antara framework yang berjalan di sisi server (Django) dan di sisi client (Vue.js).
Instalasi dan setup bagian #1 (server-side setup)
Ada dua bagian yang akan kita lakukan pada tahap instalasi dan setup. Pertama kita akan melakukan setup pada bagian server (server setup) dimana kita akan menginstal framework Django serta package-package pendukung lain seperti inertia-django dan django-vite. Sebagai catatan sebenarnya secara official Inertia tidak menyediakan server-side adapter untuk Django (hanya tersedia untuk Laravel & Rails). Tetapi kita bisa menggunakan server-side adapter yang dikembangkan oleh komunitas (community adapters) untuk framework Django. Sebelumnya silahkan siapkan dan cek apa saja yang diperlukan.
System requirements:
- python >= 3.9.0
- pip >= 20.2.3
Instalasi Django & Package Pendukung
Sekarang kita akan mulai dengan menginstal Django. Kita akan menginstalnya di dalam virtual enviroment yang akan kita setup pada folder bernama django-inertia. Buka terminal atau cmd kemudian buat sebuah folder baru django-inertia dan pindah ke dalam folder tersebut.
mkdir django-inertia && cd django-inertia
Setelah di dalam folder django-inertia, silahkan buat file baru dengan nama requirements.txt. Nantinya kita akan menulis package python apa saja yang dibutuhkan pada file ini. Silahkan tuliskan kode di bawah ini pada file tersebut.
django-inertia/requirements.txt
Django == 4.1.3
inertia-django == 0.4.1
django-vite == 2.0.2
Ada 3 package yang perlu kita install seperti kode di atas yaitu framework Django, package inertia-django sebagai server-side adapter inertia untuk Django dan yang terakhir package django-vite yang nantinya kita perlukan untuk melakukan setup vite pada framework Django. Di sini penulis akan menginstal semua package-package di atas pada sebuah virtual environment python. Silahkan buat virtual environment dengan perintah berikut.
python -m venv .venv
Kemudian aktifkan virtual enviroment dengan perintah di bawah ini:
Pengguna OS Linux atau MacOS
source .benv/bin/activate
Pengguna OS Windows
env\Scripts\activate.bat
Jalankan perintah di bawah ini untuk menginstal package-package yang sudah kita tuliskan pada file requirements.txt
pip install -r requirements.txt
Membuat project baru Django dan melakukan pengaturan konfigurasi
Berikutnya kita buat dulu project baru dari Django dengan perintah seperti ini.
django-admin startproject app .
Kemudian kita buka file django-inertia/app/settings.py untuk melakukan beberapa perubahan pada file tersebut. Pertama kita ubah pada bagian INSTALLED_APPS dan ubah menjadi seperti ini.
django-inertia/app/settings.py
# Application definition
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
# tambahkan package django-vite dan inertia-django
"django_vite",
"inertia"
]
Tambahkan Inertia middleware pada bagian MIDDLEWARE seperti berikut.
django-inertia/app/settings.py
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
# Inertia Middleware
'inertia.middleware.InertiaMiddleware'
]
Kita juga perlu mengubah base folder dimana kita nantinya menambahkan file untuk template dari aplikasi kita. Silahkan ubah pada bagian TEMPLATE
django-inertia/app/settings.py
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [BASE_DIR / 'templates'], # ubah path folder templates
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
Terakhir kita tambahkan beberapa baris kode untuk pengaturan integrasi vite & inertia pada Django. SIlahkan tambahkan baris kode di bawah ini pada baris paling bawah.
django-inertia/app/settings.py
# Where ViteJS assets are built.
DJANGO_VITE_ASSETS_PATH = BASE_DIR / "assets"
# If use HMR or not.
DJANGO_VITE_DEV_MODE = DEBUG
# Name of static files folder (after called python manage.py collectstatic)
STATIC_ROOT = BASE_DIR / "static"
# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
# when run command python manage.py collectstatic
STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]
# Inertia layout filename
INERTIA_LAYOUT = 'base.html'
Kita juga akan menambahkan sebuah file baru sebagai base HTML template. Buat folder baru dengan nama templates dan tambahkan file baru dengan nama base.html di dalam folder tersebut.
django-inertia/templates/base.html
{% load django_vite %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inertia ♥ Django</title>
{% vite_hmr_client %}
{% vite_asset 'js/app.js' %}
</head>
<body>
{% block inertia %}
{% endblock %}
</body>
</html>
Pada file di atas kita membuat sebuah file HTML dengan struktur standar yang terdiri dari tag <html> yang di dalamnya terdapat tag <head> <body>. Sebelum tag pembuka <html> kita tambahkan script untuk meload helper dari package django-vite dan sebelum tag </head> kita juga perlu menambahkan untuk meload script ViteJs HMR client dan file asset (contohnya: js/app.js) yang nantinya kita perlu tambahkan sebagai entry point dari aplikasi kita dari sisi client (Vue.js). Sedangkan pada bagian tag <body> kita tambahkan script helper dari package django-inertia untuk meload data dari server dan menampilkannya pada template.
Instalasi dan setup pada bagian #2 (client-side setup)
Sebelum mengikuti Instalasi dan setup pada bagian #2 ini, pastikan dulu kamu sudah menginstal system requirement yang dibutuhkan pada PC/Laptop.
System Requirements:
- Node.js versi 16.14.0
- Npm versi 8.18.0
Instalasi package-package yang dibutuhkan
Buka terminal/command prompt pada PC/Laptop dan jalankan perintah di bawah ini untuk menginstal package-package yang dibutuhkan dengan npm.
npm install -D vite@3.2.4 vue@3.2.45 @inertiajs/inertia@0.11.1 @inertiajs/inertia-vue3@0.6.0 @inertiajs/progress@0.2.7 @vitejs/plugin-vue@3.2.0
Tunggu proses instalasi sampai selesai dan pastikan PC/Laptop tersambung ke internet dan tidak ada error ketika menjalankan perintah di atas. Selanjutnya silahkan buka file django-inertia/package.json dan tambahkan bagian private dan scripts di atas devDependencies sehingga menjadi seperti kode di bawah ini.
django-inertia/package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@inertiajs/inertia": "^0.11.1",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@vitejs/plugin-vue": "^3.2.0",
"axios": "^1.1.3",
"vite": "^3.2.4",
"vue": "^3.2.45"
}
}
Nantinya kita perlu menjalankan perintah npm run dev ketika proses development pada localhost atau npm run build ketika kita akan melakukan proses deploying dimana perintah tersebut digunakan untuk melakukan build atau compile asset (seperti file js & css) dengan vite.
Kita juga perlu membuat file baru dengan nama vite.config.js untuk mengatur konfigurasi dari vite. Di sini fokus kita tidak akan belajar memahami tentang konfigurasi vite, Jadi silahkan cukup copy paste baris kode di bawah ini ke dalam file vite.config.js dan simpan pada root folder.
django-inertia/vite.config.js
import {resolve} from 'path';
import vue from '@vitejs/plugin-vue'
module.exports = {
plugins: [
vue()
],
root: resolve('./assets'),
base: '/static/',
server: {
host: 'localhost',
port: 3000,
open: false,
watch: {
usePolling: true,
disableGlobbing: false,
},
},
resolve: {
extensions: ['.js', '.vue'],
},
build: {
outDir: resolve('./assets/dist'),
assetsDir: '',
manifest: true,
emptyOutDir: true,
target: 'es2015',
rollupOptions: {
input: {
main: resolve('./assets/js/app.js'),
},
output: {
chunkFileNames: undefined,
},
},
},
};
Terakhir kita buat satu file javascript sebagai entry point dari aplikasi kita yang nantinya akan dibuild oleh vite. Buat folder assets pada root folder project dan buat folder js di dalam folder assets tersebut. Tambahkan file app.js di dalam folder django-inertia/assets/js. Silahkan tulis atau copy paste baris kode di bawah ini.
django-inertia/assets/js/app.js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
const pages = import.meta.glob('./pages/**/*.vue')
document.addEventListener('DOMContentLoaded', () => {
InertiaProgress.init({ showSpinner: true })
createInertiaApp({
resolve: async name => {
const page = (await pages[`./pages/${name}.vue`]()).default
return page
},
setup({ el, App, props, plugin }) {
createApp({render: () => h(App, props)})
.use(plugin)
.mount(el)
}
})
})
Sampai sini kita sudah selesai menginstal Django dan Vue serta Inertia. Materi selanjutnya kita akan menambahkan router serta view pada Django dan akan mengirimkan data dari server ke client yang kemudian akan dirender pada sebuah komponen Vue.js.
Membuat halaman baru dengan Django dan Vue.js
Pada bagian ini kita akan belajar untuk menambahkan router serta view dengan Django serta mengirimkan data dari server ke client. Kemudian kita akan menampilkan data tersebut dengan komponen Vue dari sisi client.
Kita buat view class pada Django dengan membuat file baru dengan nama views.py kemudian simpan pada folder django-inertia/app. Kemudian silahkan tulis kode di bawah ini.
django-inertia/app/views.py
from inertia import render
def home(request):
return render(request, 'Home', props={
'title': 'Django Inertia Vue.js',
'description': 'Belajar melakukan instalasi dan setup Django, Inertia dan Vue.js'
})
Yang perlu diperhatikan dari baris kode yang ada di dalam method home dimana kita menuliskan kode untuk mengembalikan response dengan method render dari package inertia-django. Ada 3 parameter dari method tersebut, yang pertama adalah request class dari Django, kedua adalah nama komponen Vue.js yang nantinya akan dirender (contoh di atas kita akan memanggil komponen dengan nama Home) dan parameter ketiga kita bisa menambahkan properties yang berisi props data yang nantinya data tersebut bisa kita olah atau ditampilkan sebagai props dari komponen Vue.js (contoh di atas kita mengirim data title dan description dengan value berupa sebuah teks/string).
Selanjutnya kita perlu menambahkan path baru ('') pada bagian urlpatterns yang akan memanggil method home dari module views. Buka file django-inertia/app/urls.py dan ubah kodenya menjadi seperti ini.
django-inertia/app/urls.py
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('', views.home),
path("admin/", admin.site.urls),
]
Seperti yang sudah kita bahas di atas, bahwa method home pada view class Django akan merender komponen Vue.js dengan nama Home. Maka sekarang kita perlu membuatnya. Silahkan tambahkan folder baru dengan nama pages di dalam folder django-inertia/assets/js. Kemudian tambahan file untuk komponen Home dengan nama file yang sama dan berextension .vue (Home.vue) di dalam folder tersebut. Kita hanya akan membuat komponen Vue.js sederhana dimana kita akan mendefinisikan props (title dan description) pada komponen tersebut dan menampilkannya pada bagian template. Selengkapnya bisa kamu lihat baris kode di bawah ini.
django-inertia/assets/js/pages/Home.vue
<script setup>
defineProps({
title: String,
description: String
})
</script>
<template>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</template>
Sekarang kita tinggal perlu menjalankan aplikasi Django pada localhost dengan mengetikkan perintah berikut pada terminal/command prompt.
python manage.py runserver
Pada sisi client kita juga perlu menjalankan vite dev server. Buka tab terminal/command prompt baru dan jalankan perintah berikut.
npm run dev
Buka URL http://127.0.0.1:8000/ pada browser dan halaman yang tampil dari aplikasi kita akan seperti ini.
Pada tutorial kita telah sukses menginstal Django dan Vue.js dan mengintegrasikannya dengan Inertia dalam satu aplikasi/project. Silahkan berikan komentar jika kamu punya pertanyaan atau saran dan kritik dari tutorial ini. Terima kasih dan salam koding :)