App Module

The app module is a thin Django module that serves the React build to the browser. It's the bridge between the Zango backend and your React frontend.

When to Create It

Create it once per workspace, before deploying the frontend. Skip this if backend/app/ already exists.

Structure

backend/app/
├── __init__.py
├── views.py       # AppView — serves the React HTML shell
├── urls.py        # Catch-all route → AppView
└── templates/
    └── app.html   # HTML template that loads the React bundle

views.py

from django.views.generic import TemplateView

class AppView(TemplateView):
    template_name = "app.html"

urls.py

from django.urls import re_path
from .views import AppView

urlpatterns = [
    re_path(r'^', AppView.as_view()),   # Catch-all — React Router handles the rest
]

app.html

{% load zstatic %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <title>{{ app_name }}</title>
</head>
<body>
  <div id="zango-app" data-base-path="/app/"></div>
  <script type="module" src="{% zstatic 'js/zango-app.<timestamp>.min.js' %}"></script>
</body>
</html>

Replace <timestamp> with the actual number from your build filename (e.g. zango-app.1776172893850.min.js).

Register in settings.json

Add the app module to your workspace's settings.json:

{
  "app_routes": [
    { "module": "app", "re_path": "^app/", "url": "urls" }
  ]
}

Deploy the Frontend Build

When ready to deploy (not during development):

1. Build:

cd <workspace>/frontend
npm run build:zango

This produces a single file in frontend/zango-build/:

zango-app.<timestamp>.min.js

2. Copy to the app's static directory:

cp frontend/zango-build/zango-app.*.min.js static/js/

3. Sync static files:

Navigate to the Zango project directory where manage.py lives and run:

python manage.py sync_static <app_name>
python manage.py collectstatic --no-input

This syncs the frontend generated build to the static files directory.

4. Update app.html with the new filename:

Open backend/app/templates/app.html and update the timestamp in the script tag:

<script type="module" src="{% zstatic 'js/zango-app.1776172893850.min.js' %}"></script>

:::note Re-deploying Every new build produces a new timestamp. After each build you must repeat steps 2–4: copy the new file, sync static, and update the filename in app.html. :::

:::tip Development During development you don't need to build — run npm run dev and the Vite dev server handles everything with hot reload. :::