方法: コード アプリを最初から作成する (プレビュー)

この記事では、 Vite から空のアプリを設定し、Power Apps コード アプリに変換する方法について説明します。 Power Platform SDK を使用した TypeScript アプリの構成について説明します

注

プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能は、お客様が早期にアクセスしてフィードバックを提供できるように、公式リリースの前に利用できます。

[前提条件]

• コード アプリが有効になっている Power Platform 環境
• Visual Studio Code
• Node.js 長期サポート (LTS) バージョン
• VS Code 用 Power Platform Tools

Vite アプリを初期化する

1. Visual Studio Code を開き、新しい PowerShell ターミナルを開き、次のように入力します。

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

2. 要求された場合は、インストールに同意します create-vite

3. appfromscratchを押して、既定のパッケージ名をそのまま使用します。

4. フレームワークの選択を求められたら、[ React] を選択します。

5. バリアントの選択を求められたら、[ TypeScript] を選択します。

6. 現時点では、Power Apps SDK では、既定の構成でポートが 3000 である必要があります。

   以下を使用してノード・タイプ定義をインストールします。

   npm i --save-dev @types/node
   

   vite.config.tsを開き、次のように更新します。

   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. ファイルを保存します。

8. Vite アプリをテストするには、次のように入力します。

   npm run dev
   

   注

   macOS で開発している場合は、 start viteを参照しないように package.json を更新する必要がある場合があります。 たとえば、開発エントリを start vite && start pac code run から変更します。

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

   vite && pac code run まで

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

9. テンプレート プロジェクトが開始され、ローカルで実行されます。 指定された http://localhost:3000 アドレスを開きます。

   

   Important

   ポート 3000 が表示されない場合は、前の手順を見直してください。

10. Ctrl + C キーを押してローカル サーバーを停止します。

あなたのコードアプリを初期化する

1. Power Platform テナントに対して Power Platform CLI を認証します。

   pac auth create
   

   メッセージが表示されたら、Power Platform アカウントを使用してサインインします。

   注

   Power Platform Tools VS Code 拡張機能を使用して認証を行うこともできます。

2. 次 を使用して環境を選択します。

   pac env select -env <URL of your environment>
   

   Power Platform Tools VS Code 拡張機能を使用して環境を選択することもできます。

3. コードアプリを初期化するには、次を使用します。

   pac code init --displayName "App From Scratch"
   

   プロジェクトに power.config.json ファイルが存在していることに注意してください。

4. 次 を使用して Power SDK をインストールします。

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

5. をpackage.jsonき、既存の行を更新します。

   "dev": "vite"
   

   次の値に変更します。

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

   更新された package.jsonを保存します。

6. という名前のsrc フォルダーにPowerProvider.tsxし、github.com/microsoft/PowerAppsCodeApps/docs/assets/PowerProvider.tsx からコードを取得します

7. ファイルを保存します。

8. 開くmain.tsx 既存のインポートの下に次のインポートを追加します。

   import PowerProvider from './PowerProvider.tsx'
   

9. :

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

   次の値に変更します。

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

10. ファイルを保存します。

11. 次を使用して、コード アプリをテストできるようになりました。

    npm run dev
    

    これにより Vite サーバーが実行されますが、Power SDK サーバーも起動します。

    

12. Power SDK Server によって提供される URL を開きます。

    Important

    Power Platform テナントと同じブラウザー プロファイルで URL を開きます。

13. 次のようなアプリが開いていることがわかります。

    

関連情報

• 方法: コード アプリをデータに接続する
• Power Apps CLI