CLI tool to create Next.js projects configured for Portal Websites with Kendo UI or Shadcn/ui
npm install create-ec-portal-appA 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.
- šØ 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
``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
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
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
``
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
- 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
| Theme | Package |
| ---------------- | --------------------------------- |
| Default | @progress/kendo-theme-default |@progress/kendo-theme-bootstrap
| Bootstrap v5 | |@progress/kendo-theme-material
| Material v3 | |@progress/kendo-theme-fluent
| Fluent | |@progress/kendo-theme-classic
| Classic | |
- 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
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
Pre-built integration with Dynamics 365:
`typescript`
// Automatically created: /api/dynamics/accounts
// Fetches accounts with proper authentication
`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
}
`
Update your Dynamics 365 URL in .env.local:
`env`
DYNAMICS_365_URL=https://yourorg.crm.dynamics.com
`bash`
npm run export # Builds static files to /dist
1. Run npm run export to generate static files/dist
2. Upload the contents of the folder to your Portal websiteindex.html
3. Configure your Portal to serve the file
4. Ensure proper routing configuration for SPA behavior
`bash`
npm run serve # Serves built files locally for testing
| 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 |
- Node.js 20+
- Valid Kendo UI license (if choosing Kendo UI)
- Microsoft Azure account (for authentication)
- Dynamics 365 environment (optional)
- 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
MIT License - see LICENSE file for details.
1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'
3. Commit changes: git push origin feature/amazing-feature
4. Push to branch:
5. Open a Pull Request
- 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
- š Kendo UI Documentation
- šØ Shadcn/ui Documentation
- š NextAuth.js Documentation
- ā” Next.js Documentation
- šÆ TailwindCSS Documentation
---
Built with ā¤ļø for Portal developers