A complete boilerplate for building a Power BI Customer Portal with authentication, administration, and Azure deployment - designed for AI-assisted "vibe coding" with GitHub Copilot.
This repository is a boilerplate/starter template for rapidly building Power BI embedded portals using AI-assisted development (vibe coding). It includes comprehensive Copilot instructions that guide you through creating a fully functional customer portal from scratch.
Based on the presentation: "Vibe Coding a Power BI Embedded Portal" - demonstrating how to leverage GitHub Copilot and AI assistance to build production-ready applications efficiently.
A customer portal that includes:
- 🔐 User authentication (login/logout with JWT)
- 📊 Embedded Power BI reports with dynamic access
- 👥 User management and role-based access
- ⚙️ Admin panel for managing reports and users
- 🎨 Custom Power BI navigation (hidden filters, custom page tabs)
- ☁️ Ready for Azure App Service deployment
- Frontend: Vanilla JavaScript (no frameworks)
- Power BI JavaScript SDK (powerbi-client)
- Local dependencies (no CDN)
- Backend: Node.js with Express
- Database: sql.js (pure JavaScript SQLite)
- Authentication: JWT with bcryptjs
- Power BI Auth: Azure AD Service Principal (MSAL)
- Hosting: Azure App Service (Linux, Node 20 LTS)
Before you start, you'll need:
- GitHub Copilot (required for vibe coding workflow)
- Node.js 20 LTS installed locally
- Azure Subscription (Free tier works fine)
- Power BI Pro or Premium workspace
- Context7 MCP Server (for Power BI documentation access)
You need to set up:
- Azure AD App Registration (Service Principal)
- Power BI Workspace with at least one report
The magic of this boilerplate is in the .github/copilot-instructions.md file. Before you start coding, update it with your Azure and Power BI details:
- Open
.github/copilot-instructions.md - Update the environment variables section with your information:
# Azure AD for Power BI
AZURE_CLIENT_ID=your-client-id # ⚠️ UPDATE THIS
AZURE_TENANT_ID=your-tenant-id # ⚠️ UPDATE THIS
AZURE_CLIENT_SECRET=your-client-secret # ⚠️ UPDATE THIS
# Power BI
POWERBI_WORKSPACE_ID=your-workspace-id # ⚠️ UPDATE THIS
POWERBI_REPORT_ID=your-report-id # ⚠️ UPDATE THISThe instructions file references Context7 for fetching Power BI Embedded documentation. Install and configure it:
# Install Context7 MCP server (if not already installed)
# Follow Context7 setup instructions for your environmentThis enables Copilot to access the latest Power BI JavaScript SDK documentation and best practices.
Now you're ready! Simply start asking Copilot to build features:
"Create the basic Express server with authentication"
"Add Power BI embedding with token generation"
"Create the admin panel for managing reports"
"Deploy this to Azure App Service"
The Copilot instructions will guide the AI to:
- Use the correct tech stack
- Follow best practices
- Avoid common pitfalls
- Create production-ready code
- Go to Azure Portal → Azure Active Directory → App Registrations
- Click New registration
- Name:
PowerBI-Embedded-Portal - Supported account types: Single tenant
- Name:
- After creation, note down:
- Application (client) ID →
AZURE_CLIENT_ID - Directory (tenant) ID →
AZURE_TENANT_ID
- Application (client) ID →
- Go to Certificates & secrets → New client secret
- Note down the secret value →
AZURE_CLIENT_SECRET
- Note down the secret value →
- Go to API permissions → Add permission
- Select Power BI Service
- Add these delegated permissions:
Report.Read.AllDataset.Read.All
- Grant admin consent
- Go to Power BI Service
- Navigate to your workspace → Settings → Access
- Add your service principal with Member or Admin role
- Note down:
- Workspace ID (from URL or workspace settings)
- Report ID (from report URL)
This boilerplate is designed for iterative AI-assisted development:
- Phase 1: Basic structure (server, routing, static files)
- Phase 2: Database & authentication
- Phase 3: Power BI integration
- Phase 4: Enhanced features (custom navigation, fullscreen)
- Phase 5: Admin panel
- Phase 6: Azure deployment
Each phase is documented in the Copilot instructions. Just ask Copilot to implement the next phase!
Critical Success Factors (handled by instructions):
- ✅ Uses sql.js (NOT better-sqlite3 - which fails on Azure)
- ✅ Enables build automation
- ✅ Excludes node_modules from deployment
- ✅ Sets correct startup command
- ✅ Configures Node 20 runtime
- "Vibe Coding a Power BI Embedded Portal" - Session materials included
- Context7 MCP Server - For accessing Power BI documentation
- GitHub Copilot - AI pair programming
This boilerplate uses sql.js instead of better-sqlite3 because:
- ✅ Pure JavaScript - no native compilation
- ✅ Works perfectly on Azure App Service
- ✅ No deployment issues
- ❌ better-sqlite3 fails on Azure (native dependency issues)
All JavaScript libraries are downloaded locally to /public folder:
- ✅ No CDN dependencies
- ✅ Works offline
- ✅ Full control over versions
- ✅ Faster loading in production
- Change
JWT_SECRETto a strong random value - Never commit
.envfile to source control - Rotate client secrets regularly
- Use Azure Key Vault for production secrets
This is a boilerplate/template project. Feel free to:
- Fork it for your own projects
- Submit improvements to the Copilot instructions
- Share your vibe coding experiences
MIT License - Feel free to use this boilerplate for any purpose.
This boilerplate is designed to be self-explanatory with comprehensive Copilot instructions. If you encounter issues:
- Check the Copilot instructions file for guidance
- Ask Copilot to help troubleshoot
- Review the presentation materials
- Check Azure logs:
az webapp log download
New to Vibe Coding?
- Read through
.github/copilot-instructions.md - Watch the presentation "Vibe Coding a Power BI Embedded Portal"
- Start with Phase 1 - let Copilot guide you
- Iterate and learn as you build
Key Principle: Trust the AI, but verify. The instructions are battle-tested to avoid common pitfalls.
Happy Vibe Coding! 🎉
Built with ❤️ and AI assistance