Cómo: Crear una aplicación de código desde cero (versión preliminar)

En este artículo se explica cómo configurar una aplicación en blanco desde Vite y convertirlo en una aplicación de código de Power Apps. Trata la configuración de una aplicación TypeScript mediante el SDK de Power Platform.

Nota:

Las características en vista previa no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes de una versión oficial para que los clientes puedan obtener acceso anticipado y proporcionar comentarios.

Prerrequisitos

• Entorno de Power Platform con aplicaciones de código habilitadas
• Visual Studio Code
• Node.js Versión de soporte técnico a largo plazo (LTS)
• Herramientas de Power Platform para VS Code

Inicialización de la aplicación de Vite

1. Abra Visual Studio Code y abra un nuevo terminal de PowerShell y escriba:

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

2. Si se le pide, acepte la instalación. create-vite

3. Para aceptar el nombre appfromscratch del paquete predeterminado, presione Entrar.

4. Si se le pide que seleccione un marco, seleccione React.

5. Si se le pide que seleccione una variante, seleccione TypeScript.

6. En este momento, el SDK de Power Apps requiere que el puerto sea 3000 en la configuración predeterminada.

   Instale la definición de tipo de nodo mediante:

   npm i --save-dev @types/node
   

   Abra el vite.config.ts y actúe para que sea:

   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. Guarde el archivo.

8. Escriba lo siguiente para probar la aplicación Vite:

   npm run dev
   

   Nota:

   Si está desarrollando en macOS, es posible que tenga que actualizar package.json para no hacer referencia a start vite. Por ejemplo, cambiaría la entrada de dev de start vite && start pac code run:

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

   Para vite && pac code run

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

9. El proyecto de plantilla se inicia y se ejecuta localmente. Vaya a la dirección http://localhost:3000 proporcionada.

   

   Importante

   Si no ve el puerto 3000, vuelva a consultar los pasos anteriores.

10. Presione Ctrl + C para detener el servidor local.

Inicializa tu aplicación de código

1. Autentique Power Platform CLI contra su inquilino de Power Platform:

   pac auth create
   

   Inicie sesión con su cuenta de Power Platform cuando se le solicite.

   Nota:

   También puede usar la extensión VS Code de Power Platform Tools para autenticarse.

2. Seleccione el entorno mediante:

   pac env select -env <URL of your environment>
   

   También puede usar la extensión de VS Code de Power Platform Tools para seleccionar el entorno.

3. Inicialice la aplicación de código mediante:

   pac code init --displayName "App From Scratch"
   

   Observe que ahora hay un power.config.json archivo en el proyecto.

4. Instale Power SDK mediante:

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

5. Abra y package.jsonactualice la línea existente:

   "dev": "vite"
   

   Cámbielo a:

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

   Guarde el package.json actualizado.

6. Agregue un nuevo archivo en la src carpeta denominada PowerProvider.tsx y tome el código de github.com/microsoft/PowerAppsCodeApps/docs/assets/PowerProvider.tsx

7. Guarde el archivo.

8. Abrirmain.tsx y agregue la siguiente importación en las importaciones existentes:

   import PowerProvider from './PowerProvider.tsx'
   

9. Actualizaciónmain.tsx:

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

   Cámbielo a:

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

10. Guarde el archivo.

11. Ahora puede probar la aplicación de código mediante:

    npm run dev
    

    Esto ejecuta el servidor vite, pero también inicia el servidor de Power SDK:

    

12. Abra la dirección URL proporcionada por power SDK Server.

    Importante

    Abra la dirección URL en el mismo perfil de navegador que el inquilino de Power Platform.

13. Debería ver que la aplicación está abierta de forma similar a la siguiente:

    

Información relacionada

• Cómo conectar tu aplicación de código a los datos
• Power Apps CLI