create-ec-react-app

A zero-configuration CLI tool for scaffolding modern, enterprise-ready React applications with a specific, opinionated stack.

This tool saves you from the tedious setup of integrating a standard set of technologies, allowing you to jump straight into development. It generates a new project pre-configured with Vite, TypeScript, Kendo UI, Tailwind CSS, TanStack Query, and more.

What's Included?

This scaffolder sets up a new project with the following technologies, all configured to work together seamlessly:

• ⚡️ Vite: Next-generation frontend tooling for a blazing-fast development experience.
• 🔷 TypeScript: Static typing for robust and scalable applications.
• 🥋 Kendo UI for React: A complete suite of professional, enterprise-grade UI components.
  • Installs @progress/kendo-react-all for access to all components.
  • Prompts for theme selection (Default, Bootstrap, Material, Fluent, Classic).
• 💨 Tailwind CSS: A utility-first CSS framework for rapid UI development, configured via the official @tailwindcss/vite plugin.
• 🔄 TanStack Query (React Query): Powerful asynchronous state management for fetching, caching, and updating data. The QueryClientProvider is pre-configured.
• 🐻 Zustand: A small, fast, and scalable bearbones state-management solution.
• 📊 XRM Types: Type definitions for Microsoft Dynamics 365 / Power Platform development.
• ✅ Strict Mode: React's Strict Mode is enabled by default for highlighting potential problems.
• 📖 Git: A new Git repository is initialized in the created project.

Prerequisites

You must have Node.js installed on your system (version 18.x or higher is recommended).

Usage

To create a new app, run the following command in your terminal:

npx create-ec-react-app

The CLI will guide you through an interactive setup process:

1. Project Name: It will first ask for the name of your project.
2. Kendo UI Theme: It will then prompt you to select a Kendo UI theme to install and configure.

Alternatively, you can provide the project name as an argument to skip the first prompt:

npx create-ec-react-app my-awesome-project

After Installation

Once the scaffolding process is complete, follow these steps to start your development server:

1. Navigate into your new project directory:

   cd <your-project-name>

2. Add your telerik-license.txt to the root directory This will allow you to activate your Kendo License

3. Activate your Kendo UI License: This is a crucial step to prevent watermarks on the Kendo components.

   npx kendo-ui-license activate

4. Start the development server:

   npm run dev

Your new application will be running on http://localhost:5173 (or the next available port).

Generated Project Structure

The generated project has a clean and logical structure, with all the necessary configurations in place.

my-awesome-project/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css         # Configured with Tailwind imports
│   ├── main.tsx          # Pre-configured with providers for Kendo, React Query, and Strict Mode
│   └── vite-env.d.ts
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json          # All dependencies are listed here
├── tailwind.config.js    # Tailwind configuration file
├── tsconfig.json
└── vite.config.ts        # Configured with the @tailwindcss/vite plugin

Contributing

Contributions are welcome! If you have suggestions for improvements or find a bug, please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.