create-yoka-react-app

Create Yoka React apps with UmiJS/Max framework and Ant Design Pro - no build configuration required.

Quick Overview

npx create-yoka-react-app my-app
cd my-app
pnpm install
pnpm start

Then open http://localhost:8000 to see your app.

What's Included

Your environment will have everything you need to build a modern React-based enterprise application:

• UmiJS/Max - A pluggable enterprise-level react application framework
• Ant Design Pro - An enterprise-class UI solution for backend applications
• React 19 - Latest version of React
• TypeScript - Type safety for your code
• Biome - Fast formatting and linting
• Tailwind CSS - Utility-first CSS framework
• Jest - Testing framework
• Husky - Git hooks

Creating an App

You'll need to have Node >= 18 on your machine.

To create a new app, run:

npx create-yoka-react-app my-app

It will create a directory called my-app inside the current folder.

Available Scripts

Inside the created directory, you can run:

pnpm start

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

pnpm build

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

pnpm preview

Preview the production build locally.

pnpm test

Runs the test watcher in an interactive mode.

pnpm lint

Lints and formats your code using Biome.

Template Features

The generated app includes:

• Login Page - Ready-to-use authentication flow
• Dashboard - Basic dashboard layout
• Table List - Example table page with CRUD operations
• 404 Page - Not found page
• Internationalization - Multi-language support (zh-CN, en-US, id-ID)
• Mock Data - Built-in mock server for development
• Request Configuration - Pre-configured request handling with error management
• Permission Control - Access control based on user roles

Customization

After creating your app, you can customize it by:

1. Modifying config/routes.ts to add your own routes
2. Adding new pages in src/pages/
3. Updating config/defaultSettings.ts for theme configuration
4. Editing config/proxy.ts for API proxy settings

License

MIT