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.
:::