Create Zango CRM React applications with no build configuration
npm install create-zango-appCreate Zango CRM React applications with no build configuration.
``bash`
npx create-zango-app my-app
cd my-app
npm run dev
You'll need to have Node 14.0.0 or later version on your local development machine.
To create a new app, you may choose one of the following methods:
`bash`
npx create-zango-app my-app
`bash`
npm init zango-app my-app
`bash`
yarn create zango-app my-app
`bash`
pnpm create 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.
`bash`
create-zango-app
- Print additional logs
- --info - Print environment debug info
- --use-npm - Use npm instead of yarn or pnpm
- --use-pnpm - Use pnpm instead of npm or yarn
- --typescript - Use TypeScript template
- --skip-install - Skip installing dependenciesProject Structure
Once the installation is done, you can open your project folder:
`
my-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── custom/
│ │ └── pages/
│ │ ├── Dashboard.js # Sample custom page
│ │ └── index.js # Export your custom pages here
│ ├── index.js # App entry point
│ └── index.css # Custom styles
├── .env.example # Environment variables template
├── .gitignore
├── db.json # Mock API data
├── mock-server.js # Mock API server
├── package.json
├── tailwind.config.js
└── vite.config.js
The entire framework is provided by the
package. You only need to:
1. Create custom pages in src/custom/pages/
2. Export them in
3. Configure routes in your API or mock dataAvailable 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
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
:`javascript
theme: {
colors: {
primary: '#1890ff',
secondary: '#52c41a',
// ... other colors
}
}
``- Zango Documentation
- React Documentation
- Vite Documentation
MIT