SPFx Entwicklung und Deployment SPFx Development and Deployment

Praxisreferenz für SharePoint Framework Architektur, Generator, Gulp, API-Berechtigungen, Teams-Integration, Deployment und Performance. Practical reference for SharePoint Framework architecture, generator, gulp, API permissions, Teams integration, deployment, and performance.

Architektur, Runtime und Lösungstypen Architecture, runtime, and solution types

Das SharePoint Framework läuft vollständig clientseitig und nutzt moderne Web-Toolchains. Lösungen werden als .sppkg paketiert, im App Catalog hochgeladen und anschließend auf Sites oder tenantweit bereitgestellt. Die Runtime basiert auf manifestgesteuerten Komponenten und nutzt standardisierte Loader, Property Panes und API-Clients wie MSGraphClientFactory oder AadHttpClient. SharePoint Framework runs fully client-side and uses modern web toolchains. Solutions are packaged as .sppkg files, uploaded to an app catalog, and then deployed to sites or tenant-wide. The runtime is based on manifest-driven components and uses standardized loaders, property panes, and API clients such as MSGraphClientFactory or AadHttpClient.

Zu den wichtigsten Komponententypen gehören Web Parts, Field Customizers, Command Sets, Application Customizers und Adaptive Card Extensions für Viva Connections. Jede Komponente bringt unterschiedliche Lebenszyklen, Hostkontexte und Performanceprofile mit. The main component types are web parts, field customizers, command sets, application customizers, and adaptive card extensions for Viva Connections. Each component brings different lifecycle hooks, host contexts, and performance profiles.

SPFx-Komponenten SPFx components

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für Architektur, Runtime und Lösungstypen dokumentieren. Document the current state, roles, and dependencies for Architecture, runtime, and solution types.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen Architektur, Runtime und Lösungstypen direkt. Tenant limits, license state, and role assignments directly affect Architecture, runtime, and solution types.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

PowerShell: App Catalog prüfen PowerShell: inspect app catalog

Connect-PnPOnline -Url https://contoso-admin.sharepoint.com -Interactive
Get-PnPTenantAppCatalogUrl
Get-PnPApp

Yeoman Generator, Projektstruktur und alle Gulp-Kommandos Yeoman generator, project structure, and all gulp commands

Der Standardstart erfolgt mit yo @microsoft/sharepoint. Dabei wählen Sie Paketname, Komponententyp, JavaScript-Framework, Umgebung, npm- oder pnpm-Workflow und optional isolierte Domains oder tenantweite Bereitstellung. Eine saubere Struktur mit src, config, gulpfile.js und package-solution.json erleichtert spätere CI/CD-Automatisierung. The standard start is yo @microsoft/sharepoint. You choose package name, component type, JavaScript framework, environment, npm or pnpm workflow, and optionally isolated domains or tenant-wide deployment. A clean structure with src, config, gulpfile.js, and package-solution.json makes later CI/CD automation easier.

Alle zentralen Entwicklungsbefehle laufen über Gulp: clean, build, bundle, package-solution, serve, trust-dev-cert, untrust-dev-cert und test. Für produktionsnahe Bundles sollten Sie immer --ship verwenden; nur dann werden Minifizierung, CDN-Manifeste und releasefähige Pakete erzeugt. All core development commands run through gulp: clean, build, bundle, package-solution, serve, trust-dev-cert, untrust-dev-cert, and test. For production-like bundles, always use --ship; only then do you get minification, CDN manifests, and release-ready packages.

Generator-Optionen Generator options

Gulp-Kommandoreferenz Gulp command reference

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für Yeoman Generator, Projektstruktur und alle Gulp-Kommandos dokumentieren. Document the current state, roles, and dependencies for Yeoman generator, project structure, and all gulp commands.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen Yeoman Generator, Projektstruktur und alle Gulp-Kommandos direkt. Tenant limits, license state, and role assignments directly affect Yeoman generator, project structure, and all gulp commands.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

PowerShell: Generator und Build PowerShell: generator and build

npm install -g yo @microsoft/generator-sharepoint
yo @microsoft/sharepoint
gulp clean
gulp build
gulp bundle --ship
gulp package-solution --ship

API-Berechtigungen, App Catalogs, CDN und Deployment API permissions, app catalogs, CDN, and deployment

SPFx-Lösungen deklarieren API-Berechtigungen in package-solution.json und beantragen diese im Tenant. Nach dem Upload in den App Catalog muss ein Administrator ausstehende API Requests genehmigen, bevor AadHttpClient oder MSGraphClient produktiv funktionieren. SPFx solutions declare API permissions in package-solution.json and request them in the tenant. After upload to the app catalog, an administrator must approve pending API requests before AadHttpClient or MSGraphClient works in production.

Für produktive Bundles brauchen Sie außerdem ein Asset-Hosting-Modell. Das kann das SharePoint App Catalog CDN, Microsoft 365 Public/Private CDN oder ein externes Storage-Konto sein. Tenant-wide deployment spart Site-Installationen, erhöht aber den Governance-Anspruch an Versionierung und Rückfallstrategie. Production bundles also need an asset-hosting model. That can be the SharePoint app catalog CDN, Microsoft 365 public or private CDN, or an external storage account. Tenant-wide deployment reduces site installs but raises the governance bar for versioning and rollback.

Deployment-Bausteine Deployment building blocks

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für API-Berechtigungen, App Catalogs, CDN und Deployment dokumentieren. Document the current state, roles, and dependencies for API permissions, app catalogs, CDN, and deployment.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen API-Berechtigungen, App Catalogs, CDN und Deployment direkt. Tenant limits, license state, and role assignments directly affect API permissions, app catalogs, CDN, and deployment.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

JSON: API-Berechtigungen JSON: API permissions

{
  "solution": {
    "name": "contoso-news-client-side-solution",
    "id": "11111111-2222-3333-4444-555555555555",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Sites.Read.All"
      }
    ]
  }
}

PowerShell: PnP Deployment PowerShell: PnP deployment

Connect-PnPOnline -Url https://contoso-admin.sharepoint.com -Interactive
Add-PnPApp -Path .\sharepoint\solution\contoso.sppkg -Publish -Overwrite
Install-PnPApp -Identity contoso.sppkg -Scope Tenant
Get-PnPApp | Format-Table Title,Deployed,AppCatalogVersion

Web Parts, Extensions, ACE und Teams-Integration Web parts, extensions, ACE, and Teams integration

Web Parts sind der Standard für Seiteninhalte; Extensions verändern bestehende Oberflächen. Adaptive Card Extensions adressieren Viva Connections Dashboards. Für Teams-Integration kann eine SPFx-Web-Part-Lösung als persönliche App, Tab oder Meeting-Oberfläche eingebunden werden, wenn Manifest und Hostkontext zusammenpassen. Web parts are the standard for page content; extensions change existing surfaces. Adaptive card extensions target Viva Connections dashboards. For Teams integration, an SPFx web-part solution can be embedded as a personal app, tab, or meeting surface when the manifest and host context align.

Wichtig ist die klare Trennung zwischen SharePoint-Lösung und Teams-App-Paket. Das SPFx-Paket liefert die Webkomponente, während das Teams-Manifest Hosteinbindung, App-Name, Icons und Kontextdefinitionen beschreibt. It is important to separate the SharePoint solution from the Teams app package. The SPFx package delivers the web component, while the Teams manifest describes host integration, app name, icons, and context definitions.

Integrationsmuster Integration patterns

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für Web Parts, Extensions, ACE und Teams-Integration dokumentieren. Document the current state, roles, and dependencies for Web parts, extensions, ACE, and Teams integration.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen Web Parts, Extensions, ACE und Teams-Integration direkt. Tenant limits, license state, and role assignments directly affect Web parts, extensions, ACE, and Teams integration.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

JSON: Teams-Manifest-Ausschnitt JSON: Teams manifest snippet

{
  "manifestVersion": "1.17",
  "version": "1.0.0",
  "id": "11111111-2222-3333-4444-555555555555",
  "name": { "short": "Contoso Portal" },
  "staticTabs": [
    {
      "entityId": "home",
      "name": "Contoso Portal",
      "contentUrl": "https://contoso.sharepoint.com/sites/app/SitePages/home.aspx",
      "scopes": ["personal"]
    }
  ]
}

Versionierung, PnP Controls, Debugging und Performance Versioning, PnP controls, debugging, and performance

Versionsfelder existieren an mehreren Stellen: package.json, package-solution.json, Teams-Manifest und gegebenenfalls Deployment-Pipeline. Diese Versionen sollten bewusst synchronisiert werden, damit Support, Rollback und App-Updates nachvollziehbar bleiben. Version fields exist in several places: package.json, package-solution.json, the Teams manifest, and possibly the deployment pipeline. These versions should be synchronized intentionally so support, rollback, and app updates remain traceable.

Für Performance zählen Bundle-Größe, Lazy Loading, API-Call-Strategie, Caching und die Zahl der DOM-Operationen. PnP Controls und PnPjs beschleunigen die Entwicklung, sollten aber bewusst tree-shaken und nur dort eingesetzt werden, wo der Mehrwert den Bundle-Impact rechtfertigt. Performance depends on bundle size, lazy loading, API-call strategy, caching, and the number of DOM operations. PnP Controls and PnPjs speed up development, but they should be tree-shaken deliberately and used only where the value outweighs the bundle impact.

Best Practices für Produktivbetrieb Best practices for production

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für Versionierung, PnP Controls, Debugging und Performance dokumentieren. Document the current state, roles, and dependencies for Versioning, PnP controls, debugging, and performance.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen Versionierung, PnP Controls, Debugging und Performance direkt. Tenant limits, license state, and role assignments directly affect Versioning, PnP controls, debugging, and performance.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

PowerShell: Release-Runbook PowerShell: release runbook

npm ci
gulp clean
gulp bundle --ship
gulp package-solution --ship
Connect-PnPOnline -Url https://contoso-admin.sharepoint.com -Interactive
Add-PnPApp -Path .\sharepoint\solution\contoso.sppkg -Publish -Overwrite

PnP PowerShell Deployment und Best Practices PnP PowerShell deployment and best practices

PnP PowerShell deckt Upload, Publish, Install und Inventarisierung von SPFx-Paketen ab. In Kombination mit CI/CD kann dieselbe Skriptstrecke App Catalog, Site Collection App Catalog, Site Contents und Folgekonfiguration wie Property Bags oder Seiteninstallation steuern. PnP PowerShell covers upload, publish, install, and inventory of SPFx packages. Combined with CI/CD, the same script path can control the app catalog, site collection app catalog, site contents, and follow-up configuration such as property bags or page installation.

Bewährte Praxis sind getrennte Pipelines für Build und Release, ein Versionsgate gegen den App Catalog sowie ein dokumentierter Fallback auf die letzte bekannte stabile .sppkg-Version. Tenant-wide deployment sollte nur nach Pilotierung in repräsentativen Site- und Teams-Kontexten erfolgen. Best practice is to separate build and release pipelines, gate against the app catalog version, and maintain a documented fallback to the last known stable .sppkg version. Tenant-wide deployment should happen only after pilot validation across representative site and Teams contexts.

Wichtige PnP-Cmdlets Important PnP cmdlets

Implementierung Implementation

1. Bestandsaufnahme, Rollen und Abhängigkeiten für PnP PowerShell Deployment und Best Practices dokumentieren. Document the current state, roles, and dependencies for PnP PowerShell deployment and best practices.
2. Pilotobjekte mit realistischen Daten und Berechtigungen auswählen. Select pilot objects with realistic data and permissions.
3. Portaländerungen immer mit PowerShell oder API-Abfragen gegenprüfen. Always validate portal changes with PowerShell or API queries.
4. Monitoring, Support-Runbook und Rückfalloptionen vor der Produktion festhalten. Capture monitoring, support runbooks, and rollback options before production rollout.

Betrieb & Hinweise Operations & Notes

• Tenant-Limits, Lizenzzustand und Rollenzuweisungen beeinflussen PnP PowerShell Deployment und Best Practices direkt. Tenant limits, license state, and role assignments directly affect PnP PowerShell deployment and best practices.
• Automatisierung sollte Idempotenz, Logging und Fehlerklassifizierung enthalten. Automation should include idempotency, logging, and error classification.
• Änderungen sollten in Pilotwellen getestet und mit Nutzerkommunikation begleitet werden. Changes should be tested in pilot waves and accompanied by user communication.
• Für Audits lohnt sich eine dokumentierte Soll-Konfiguration mit regelmäßigem Drift-Abgleich. For audits, keep a documented target state and compare for drift regularly.

PowerShell: Vollständiger Deployment-Flow PowerShell: full deployment flow

Connect-PnPOnline -Url https://contoso-admin.sharepoint.com -Interactive
$app = Add-PnPApp -Path .\sharepoint\solution\contoso.sppkg -Overwrite
Publish-PnPApp -Identity $app.Id
Install-PnPApp -Identity $app.Id -Scope Tenant
Get-PnPApp -Identity $app.Id | Format-List Title,InstalledVersion,AppCatalogVersion,Deployed