Instalasi Django, Inertia.Js Dan Vue.Js

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

mkdir django-inertia && cd django-inertia

Tahap 2: Penulisan Kode & Konfigurasi

Django == 4.1.3
inertia-django == 0.4.1
django-vite == 2.0.2

Tahap 3: Penulisan Kode & Konfigurasi

python -m venv .venv

Tahap 4: Penulisan Kode & Konfigurasi

source .benv/bin/activate

Tahap 5: Penulisan Kode & Konfigurasi

env\Scripts\activate.bat

Tahap 6: Penulisan Kode & Konfigurasi

pip install -r requirements.txt

Tahap 7: Penulisan Kode & Konfigurasi

django-admin startproject app .

Tahap 8: Penulisan Kode & Konfigurasi

# 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"
]

Tahap 9: Penulisan Kode & Konfigurasi

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'
]

Tahap 10: Penulisan Kode & Konfigurasi

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",
            ],
        },
    },
]

Tahap 11: Penulisan Kode & Konfigurasi

# 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'

Tahap 12: Penulisan Kode & Konfigurasi

{% 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 &hearts; Django</title>

    {% vite_hmr_client %}
    {% vite_asset 'js/app.js' %}
</head>
<body>
    {% block inertia %}

    {% endblock %}
</body>
</html>

Tahap 13: Penulisan Kode & Konfigurasi

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

Tahap 14: Penulisan Kode & Konfigurasi

{
  "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"
  }
}

Tahap 15: Penulisan Kode & Konfigurasi

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,
      },
    },
  },
};

Tahap 16: Penulisan Kode & Konfigurasi

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)
        }
    })
})

Tahap 17: Penulisan Kode & Konfigurasi

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'
    })

Tahap 18: Penulisan Kode & Konfigurasi

from django.contrib import admin
from django.urls import path

from . import views

urlpatterns = [
    path('', views.home),
    path("admin/", admin.site.urls),
]

Tahap 19: Penulisan Kode & Konfigurasi

<script setup>
defineProps({
    title: String,
    description: String
})
</script>

<template>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
</template>

Tahap 20: Penulisan Kode & Konfigurasi

python manage.py runserver

Tahap 21: Penulisan Kode & Konfigurasi

npm run dev

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!