@zango-core/create-zango-app

Create Zango CRM React applications with no build configuration.

Quick Start

``bash
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:

$3

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

$3

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

$3

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

$3

`bash
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

`bash
create-zango-app [options]
`

$3


- --verbose - Print additional logs
- --info - Print environment debug info
- --use-pnpm - Use pnpm instead of npm or yarn
- --skip-install - Skip installing dependencies

Project Structure

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

`
my-app/
├── node_modules/
├── public/
│ └── favicon.svg
├── src/
│ ├── custom/
│ │ └── pages/
│ │ ├── Dashboard.js # Sample custom page
│ │ └── index.js # Export your custom pages here
│ ├── App.js # Main app component
│ ├── index.js # App entry point
│ ├── index.zango.js # Zango framework integration
│ └── index.css # Custom styles
├── .env.example # Environment variables template
├── .gitignore
├── index.html # HTML template
├── package.json
├── tailwind.config.js
├── vite.config.js
└── vite.config.zango.js # Zango-specific Vite configuration
`

The entire framework is provided by the @zango-core/crm-framework package. You only need to:
1. Create custom pages in src/custom/pages/
2. Export them in src/custom/pages/index.js
3. Configure routes in your API or mock data

Available Scripts

In the project directory, you can run:

$3

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

The page will reload when you make changes.

$3

Runs both the development server and mock API server concurrently.
- App: http://localhost:3000
- Mock API: http://localhost:3001

$3

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.




$3

Preview the production build locally.

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
- Mock API Server: Built-in json-server for development

Configuration

$3

Configure API endpoints in zango.config.js:

`javascript
api: {
endpoints: {
development: 'http://localhost:8000',
staging: 'https://staging-api.example.com',
production: 'https://api.example.com',
mock: 'http://localhost:3001',
}
}
`

$3

Modify the theme in zango.config.js:

`javascript
theme: {
colors: {
primary: '#1890ff',
secondary: '#52c41a',
// ... other colors
}
}
``

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