Frontend Setup

:::info Requires AppBuilder This frontend setup is part of the AppBuilder package — Zango's frontend framework that provides the React shell, routing, navigation, and auth UI. Make sure AppBuilder is installed before proceeding. :::

The AppBuilder frontend is a React app scaffolded with @zango-core/create-zango-app. It connects to your Zango backend via a proxy and renders all pages, menus, and auth flows driven by the AppBuilder initializer API at runtime.

One-Time Setup Steps

These steps are done once per workspace before writing any frontend code:

1. Scaffold the React app — create the frontend project in your workspace
2. Configure the environment — connect it to your backend domain and proxy routes
3. Create the app module — the Django view that serves the React build to the browser

Development Workflow

After setup, your day-to-day workflow is:

npm run dev          # Start the frontend dev server (port 3000, hot reload)
                     # Backend is proxied — no build step needed during development

npm run build:zango  # Build once when ready to deploy to the Zango platform

Project Structure

workspace/frontend/
├── src/
│   ├── custom/
│   │   └── pages/           # Your custom React pages go here
│   │       ├── Dashboard.jsx
│   │       └── index.js     # Export all custom pages from here
│   ├── App.tsx              # Root — ZangoApp configuration
│   ├── index.tsx            # Dev entry point
│   └── index.zango.tsx      # Zango platform entry point
├── .env                     # Environment config (proxy routes, backend URL)
├── vite.config.ts           # Dev server config
└── vite.config.zango.ts     # Single-file build for Zango platform

Where to add code:

What	Where
New pages	src/custom/pages/YourPage.jsx + export in index.js
Shared components	src/custom/components/
Custom hooks	src/custom/hooks/
Constants / config	src/custom/constants/