Vorgehensweise: Erstellen einer Code-App von Grund auf neu (Vorschau)

In diesem Artikel wird erläutert, wie Sie eine leere App aus Vite einrichten und sie in eine Power Apps-Code-App umwandeln. Es behandelt das Konfigurieren einer TypeScript-App mit dem Power Platform SDK

Hinweis

Previewfunktionen sind nicht für den Produktionseinsatz gedacht und können eine eingeschränkte Funktionalität aufweisen. Diese Funktionen sind vor einer offiziellen Veröffentlichung verfügbar, damit Kunden frühzeitig zugreifen und Feedback geben können.

Voraussetzungen

• Power Platform-Umgebung mit aktivierten Code-Apps
• Visual Studio Code
• Node.js Long Term Support (LTS)-Version
• Power Platform Tools für VS Code

Initialisieren Ihrer Vite-App

1. Öffnen Sie Visual Studio Code, und öffnen Sie ein neues PowerShell-Terminal, und geben Sie Folgendes ein:

   mkdir C:\CodeApps -Force
   cd C:\CodeApps
   npm create vite@latest AppFromScratch -- --template react-ts
   cd C:\CodeApps\AppFromScratch
   npm install
   

2. Wenn Sie gefragt werden, stimmen Sie der Installation zu create-vite

3. Übernehmen Sie den Standardpaketnamen appfromscratch , indem Sie die EINGABETASTE drücken.

4. Wenn Sie aufgefordert werden, ein Framework auszuwählen, wählen Sie React aus.

5. Wenn Sie aufgefordert werden, eine Variante auszuwählen, wählen Sie TypeScript aus.

6. Derzeit erfordert das Power Apps SDK, dass der Port 3000 in der Standardkonfiguration sein muss.

   Installieren Sie die Knotentypdefinition mithilfe von:

   npm i --save-dev @types/node
   

   Öffnen Sie das vite.config.ts und aktualisieren Sie es auf Folgendes:

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import * as path from 'path'
   
   // https://vite.dev/config/
   export default defineConfig({
     base: "./",
     server: {
       host: "::",
       port: 3000,
     },
     plugins: [react()],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
   });
   

7. Speichern Sie die Datei.

8. Geben Sie Folgendes ein, um Ihre Vite-App zu testen:

   npm run dev
   

   Hinweis

   Wenn Sie auf macOS entwickeln, müssen Sie möglicherweise die package.json aktualisieren, damit sie nicht auf start vite verweist. Beispielsweise ändern Sie den Dev-Eintrag von start vite && start pac code run:

   "scripts": {    
      "dev": "start vite && start pac code run",
      "build": "tsc -b && vite build",
      "lint": "eslint .",
      "preview": "vite preview"
    }
   

   An vite && pac code run

    "scripts": {    
      "dev": "vite && pac code run",
      "build": "tsc -b && vite build",
      "lint": "eslint .",
      "preview": "vite preview"
    }
   

9. Das Vorlagenprojekt wird gestartet und lokal ausgeführt. Navigieren Sie zur angegebenen Adresse http://localhost:3000.

   

   Von Bedeutung

   Wenn Port 3000 nicht angezeigt wird, lesen Sie die vorherigen Schritte erneut.

10. Drücken Sie STRG+C , um den lokalen Server zu beenden.

Initialisiere deine Code-App

1. Authentifizieren Sie die Power Platform CLI für Ihren Power Platform-Mandanten:

   pac auth create
   

   Melden Sie sich mit Ihrem Power Platform-Konto an, wenn Sie dazu aufgefordert werden.

   Hinweis

   Sie können auch die Power Platform Tools VS Code Extension verwenden, um die Authentifizierung durchzuführen.

2. Wählen Sie Ihre Umgebung aus mit Hilfe von:

   pac env select -env <URL of your environment>
   

   Sie können auch die Power Platform Tools VS Code Extension verwenden, um die Umgebung auszuwählen.

3. Initialisieren Sie Ihre Code-App mithilfe von:

   pac code init --displayName "App From Scratch"
   

   Beachten Sie, dass es jetzt eine power.config.json Datei in Ihrem Projekt gibt.

4. Installieren Sie das Power SDK mithilfe von:

   npm install --save "@microsoft/power-apps"
   

5. Öffnen Sie die package.jsonZeile, und aktualisieren Sie die vorhandene Zeile:

   "dev": "vite"
   

   Ändern Sie sie in:

   "dev": "start pac code run && vite",
   

   Speichern Sie die aktualisierte package.json.

6. Fügen Sie eine neue Datei im Ordner mit dem Namen src hinzu, und holen Sie den Code von PowerProvider.tsx

7. Speichern Sie die Datei.

8. Offenmain.tsx und fügen Sie den folgenden Import unter den vorhandenen Importen hinzu:

   import PowerProvider from './PowerProvider.tsx'
   

9. Aktualisierenmain.tsx:

   <StrictMode>
     <App />
   </StrictMode>,
   

   Ändern Sie sie in:

   <StrictMode>
     <PowerProvider>
       <App />
     </PowerProvider>
   </StrictMode>,
   

10. Speichern Sie die Datei.

11. Sie können die Code-App jetzt testen mithilfe von:

    npm run dev
    

    Dadurch wird der Vite-Server ausgeführt, aber auch der Power SDK-Server gestartet:

    

12. Öffnen Sie die url, die vom Power SDK-Server bereitgestellt wird.

    Von Bedeutung

    Öffnen Sie die URL im selben Browserprofil wie Ihr Power Platform-Mandant.

13. Die App sollte wie folgt geöffnet werden:

    

Verwandte Informationen

• So verbinden Sie Ihre Code-App mit Daten
• Power Apps CLI