🚀 Create EC Portal App

A CLI tool that scaffolds Next.js applications optimized for Portal Websites with your choice of Kendo UI or Shadcn/ui components, Microsoft Authentication, and Dynamics 365 integration.

✨ Features

• 🎨 UI Library Choice - Choose between Kendo UI (5 theme options) or modern Shadcn/ui components
• 🔐 Microsoft Authentication - Ready-to-use NextAuth.js setup with Microsoft Entra ID
• 📊 Dynamics 365 Ready - Pre-configured API routes and React Query hooks
• ⚡ Next.js 15 - Latest Next.js with TypeScript and Turbopack
• 🎯 TailwindCSS - Custom presets for both UI libraries with design tokens
• 📱 Portal Deployment - Optimized build configuration for Portal hosting

🛠 Installation

npx create-ec-portal-app@latest my-portal-app

Or install globally:

npm install -g create-ec-portal-app
create-ec-portal-app my-portal-app

🎯 Quick Start

1. Create a new project:

   npx create-ec-portal-app@latest my-portal-app
   cd my-portal-app

2. If using Kendo UI - Activate your license (Required):

   npx kendo-ui-license activate

   If using Shadcn/ui - Add additional components as needed:

   npx shadcn-ui@latest add button card dialog

3. Start development:

   npm run dev

4. Build for Portal deployment:

   npm run export

📦 What's Included

🧩 Dependencies

UI Libraries (your choice):

• Kendo UI: Buttons, Layout, Inputs, Grid, DateInputs, Dropdowns, Dialogs with theme support
• Shadcn/ui: Modern React components built on Radix UI with Tailwind CSS

Core Stack:

• Authentication: NextAuth.js with Microsoft Entra ID provider
• State Management: Zustand for client state, React Query for server state
• Styling: TailwindCSS with custom presets for both UI libraries

📁 Project Structure

my-portal-app/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/[...nextauth]/     # NextAuth.js routes
│   │   │   └── dynamics/accounts/     # Dynamics 365 API
│   │   ├── globals.css                # TailwindCSS with UI library styles
│   │   ├── layout.tsx                 # Root layout with providers
│   │   ├── page.tsx                   # Home page with auth
│   │   └── providers.tsx              # React Query + Session providers
│   ├── components/                    # (Shadcn/ui only)
│   │   └── ui/                        # UI components
│   ├── hooks/
│   │   └── useDynamicsAccounts.ts     # Dynamics 365 React Query hook
│   └── lib/
│       ├── dynamics.ts                # Dynamics 365 utilities
│       └── utils.ts                   # (Shadcn/ui only) cn helper
├── auth.ts                            # NextAuth.js configuration
├── kendo-tw-preset.js                 # (Kendo UI only) TailwindCSS preset
├── components.json                    # (Shadcn/ui only) CLI configuration
├── .env.local                         # Environment variables
└── .prettierrc                        # Code formatting

⚙️ Configuration Files

• TypeScript: Configured with path aliases and Next.js optimizations
• TailwindCSS: Custom presets for both Kendo UI and Shadcn/ui with design tokens
• Prettier: Consistent code formatting
• Environment: Pre-configured for Microsoft Authentication and Dynamics 365

🎨 UI Library Options

Kendo UI - Choose from 5 beautiful themes:

| Theme | Package | | ---------------- | --------------------------------- | | Default | @progress/kendo-theme-default | | Bootstrap v5 | @progress/kendo-theme-bootstrap | | Material v3 | @progress/kendo-theme-material | | Fluent | @progress/kendo-theme-fluent | | Classic | @progress/kendo-theme-classic |

Shadcn/ui - Modern React Components:

• Built on Radix UI primitives
• Fully customizable with CSS variables
• Dark mode support out of the box
• Accessible by default
• Copy/paste components you need

🔐 Authentication Setup

The generated project includes Microsoft Entra ID authentication. To configure:

1. Register your app in Azure Active Directory
2. Update .env.local with your credentials:

   AUTH_MICROSOFT_ENTRA_ID_ID=your-client-id
   AUTH_MICROSOFT_ENTRA_ID_SECRET=your-client-secret
   AUTH_MICROSOFT_ENTRA_ID_TENANT_ID=your-tenant-url
   AUTH_SECRET=your-nextauth-secret

📊 Dynamics 365 Integration

Pre-built integration with Dynamics 365:

API Route

// Automatically created: /api/dynamics/accounts
// Fetches accounts with proper authentication

React Hook

import { useDynamicsAccounts } from "@/hooks/useDynamicsAccounts";
import { Button } from "@/components/ui/button"; // Shadcn/ui
// or
import { Button } from "@progress/kendo-react-buttons"; // Kendo UI

function AccountsList() {
  const { data: accounts, isLoading, error } = useDynamicsAccounts();
  // Use your accounts data with your chosen UI library
}

Configuration

Update your Dynamics 365 URL in .env.local:

DYNAMICS_365_URL=https://yourorg.crm.dynamics.com

🚀 Portal Deployment

Build Process

npm run export  # Builds static files to /dist

Deployment Steps

1. Run npm run export to generate static files
2. Upload the contents of the /dist folder to your Portal website
3. Configure your Portal to serve the index.html file
4. Ensure proper routing configuration for SPA behavior

Local Testing

npm run serve   # Serves built files locally for testing

📚 Available Scripts

| Script | Description | | -------------------- | ---------------------------------------- | | npm run dev | Start development server with Turbopack | | npm run build | Build for production | | npm run export | Build static files for Portal deployment | | npm run serve | Serve built files locally | | npm run lint | Run ESLint | | npm run type-check | Run TypeScript type checking |

🛠 Development

Prerequisites

• Node.js 20+
• Valid Kendo UI license (if choosing Kendo UI)
• Microsoft Azure account (for authentication)
• Dynamics 365 environment (optional)

Architecture

• Frontend: Next.js 15 with TypeScript and TailwindCSS
• Authentication: NextAuth.js with Microsoft Entra ID
• State Management: React Query for server state, Zustand for client state
• UI Components: Your choice of Kendo UI for React or Shadcn/ui components
• API Integration: Built-in Dynamics 365 REST API helpers

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

⚠️ Important Notes

• Kendo License: If choosing Kendo UI, you must have a valid license and activate it before using the components
• Shadcn/ui Setup: If choosing Shadcn/ui, additional components can be added using npx shadcn-ui@latest add
• Authentication: Configure your Microsoft Entra ID application with proper redirect URIs
• Portal Deployment: Test your static build locally before deploying to ensure all routes work correctly

📞 Support

• 📖 Kendo UI Documentation
• 🎨 Shadcn/ui Documentation
• 🔐 NextAuth.js Documentation
• ⚡ Next.js Documentation
• 🎯 TailwindCSS Documentation

Built with ❤️ for Portal developers