@zango-core/create-zango-app

Create Zango CRM React applications with no build configuration.

Quick Start

npx @zango-core/create-zango-app my-app
cd my-app
npm run dev

Creating an App

You'll need to have Node 18.0.0 or later version on your local development machine.

To create a new app, you may choose one of the following methods:

npx

npx @zango-core/create-zango-app my-app

npm

npm init @zango-core/zango-app my-app

Yarn

yarn create @zango-core/zango-app my-app

pnpm

pnpm create @zango-core/zango-app my-app

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies.

Options

create-zango-app <project-directory> [options]

Options:

• --verbose - Print additional logs
• --use-npm - Use npm (the default)
• --use-pnpm - Use pnpm instead of npm
• --skip-install - Skip installing dependencies

Projects are generated with TypeScript.

Project Structure

Once the installation is done, you can open your project folder:

my-app/
├── node_modules/
├── public/
│   └── favicon.svg
├── src/
│   ├── custom/
│   │   └── pages/
│   │       └── index.ts        # Custom page registry
│   ├── types/
│   │   └── zango.d.ts          # Zango type definitions
│   ├── App.tsx                 # Main app component
│   ├── index.tsx               # App entry point
│   ├── index.zango.tsx         # Zango platform entry point
│   ├── index.css               # Custom styles
│   └── vite-env.d.ts           # Vite environment types
├── scripts/
│   └── inline-zango-css.mjs    # Inlines CSS into the single-file Zango bundle
├── .env.example                # Environment variables template
├── .gitignore
├── index.html                  # HTML template
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vite.config.zango.ts        # Zango-specific Vite configuration

The entire framework is provided by the @zango-core/appbuilder package. src/App.tsx renders <ZangoApp /> and points it at your backend's initializer endpoint; routes, menu, and theme all come from that response.

Your own pages go in src/custom/pages/ and are exported from its index.ts, which App.tsx passes straight to <ZangoApp /> — so adding a page never means editing App.tsx.

Tailwind CSS v4 is wired through the @tailwindcss/vite plugin, so there is no tailwind.config file — configure it from src/index.css.

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.

npm run build

Type-checks with tsc, then builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run build:zango

Builds the app as a single file to zango-build/zango-app.<timestamp>.min.js for deployment to the Zango platform.

npm run preview

Preview the production build locally.

npm run type-check

Runs TypeScript type checking without emitting files.

Features

• Plugin-based Architecture: Dynamic page rendering based on API configuration
• CRUD Operations: Auto-generated tables with full CRUD support
• Profile360: Comprehensive entity profile pages
• Custom Pages: Support for user-defined components
• Theme System: CSS variables-based theming with Tailwind CSS v4
• Smart Navigation: Automatic routing between React Router and server routes
• TypeScript: Typed template with type-check script and Zango type definitions
• Single-file Build: Bundle the whole app into one JS file for the Zango platform

Configuration

API Endpoints

Copy .env.example to .env and set the backend URL plus the paths the dev server proxies to it:

VITE_API_BASE_URL=http://localhost:8000
VITE_PROXY_ROUTES=/api,/zango,/frame

The app's own initializer endpoint is set in src/App.tsx via the appInitializerEndpoint prop on <ZangoApp /> (default /app/initializer/).

Theme Customization

The theme is served by the backend, not configured in the project. The initializer response's colors and typography are applied as CSS variables, which you can reference from your own styles.

See the generated project's README.md for the full response structure.

Publishing

This package is automatically published to npm when changes are pushed to the main branch with a new version number in package.json.

Contributing

Issues and pull requests are welcome at GitHub.

Learn More

• Zango Documentation
• React Documentation
• Vite Documentation

License

MIT