🚀 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

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

Or install globally:

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

🎯 Quick Start

1. Create a new project:

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

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

`bash
npx kendo-ui-license activate
`

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

`bash
npx shadcn-ui@latest add button card dialog
`

3. Start development:

`bash
npm run dev
`

4. Build for Portal deployment:
`bash
npm run export
`

📦 What's Included

$3

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

$3

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

$3

- 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

$3

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

$3

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

$3

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

$3

`typescript
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
}
`

$3

Update your Dynamics 365 URL in .env.local:

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

🚀 Portal Deployment

$3

`bash
npm run export # Builds static files to /dist
`

$3

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

$3

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

$3

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

$3

- 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