3.2 Creando el proyecto con la plantilla oficial

Con la tabla de Dataverse creada, es momento de crear el proyecto de Code App. Aquí vamos a ver cómo usar la plantilla oficial de Microsoft, qué hace cada archivo del proyecto y los comandos de terminal que usamos durante el proceso.

Objetivos de aprendizaje

• Crear un nuevo proyecto de Code App usando la plantilla oficial
• Entender la estructura de archivos del proyecto generado
• Configurar el archivo de configuración de Power Apps
• Conocer los scripts de npm disponibles

Creación del proyecto desde la terminal

Para empezar, necesitas abrir tu editor de código (como Visual Studio Code). Una vez abierto, abre una nueva terminal (en VS Code puedes hacerlo desde el menú Terminal > New Terminal). Aquí es donde ejecutaremos los comandos para construir la base de nuestra aplicación.

Asegúrate de estar en la carpeta donde quieres crear tu proyecto y lanza secuencialmente los siguientes comandos:

# 1. Scaffolding del proyecto
# Usamos degit para clonar la plantilla oficial sin el historial de git
npx degit github:microsoft/PowerAppsCodeApps/templates/vite gestor-incidencias

# 2. Entramos a la carpeta recién creada
cd gestor-incidencias

# 3. Instalamos las dependencias de Node
npm install

# 4. Vinculamos el proyecto con nuestro entorno de Power Platform
# Necesitamos el Environment ID (lo obtenemos del Admin Center o con pac env list)
npx power-apps init --display-name "Gestor de Incidencias" --environment-id [TU-ENV-ID]

Obtén tu Environment ID ejecutando pac env list en el terminal y buscando el ID del entorno donde habilitaste las Code Apps.

La estructura del proyecto generado

Después de ejecutar los comandos anteriores, tendrás esta estructura de archivos en tu editor:

gestor-incidencias/
├── src/
│   ├── App.tsx               # Componente raíz de la aplicación
│   ├── main.tsx              # Punto de entrada
│   ├── index.css             # Estilos globales
│   └── generated/            # Aquí irá el SDK generado por PAC CLI
│       └── services/         # (se genera al conectar Dataverse)
├── public/
│   └── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── power-apps.config.json    # Configuración de la Code App
└── .env.local                # Variables de entorno locales (no commitear)

El archivo más importante: power-apps.config.json

Este archivo contiene la configuración que vincula tu proyecto con Power Platform:

{
  "displayName": "Gestor de Incidencias",
  "environmentId": "tu-environment-id",
  "appId": "tu-app-id-generado"
}

El campo appId se genera automáticamente cuando ejecutas npx power-apps init por primera vez. Es el identificador único de tu Code App en Power Platform.

El package.json y los scripts disponibles

El package.json de la plantilla incluye varios scripts útiles:

{
  "scripts": {
    "dev": "power-apps run",       // Servidor de desarrollo local
    "build": "tsc -b && vite build", // Compila TypeScript y hace el build
    "push": "power-apps push",     // Despliega al entorno de Power Platform
    "lint": "eslint .",            // Ejecuta el linter
    "preview": "vite preview"      // Preview del build de producción
  }
}

El archivo .env.local

Este archivo contiene configuración local que no se debe incluir en el control de versiones. El .gitignore de la plantilla ya lo excluye. Contiene principalmente el Environment ID para el desarrollo local:

VITE_ENVIRONMENT_ID=tu-environment-id

Puntos clave

• Se debe usar la terminal de VS Code para ejecutar los comandos de inicialización.
• Se usa npx degit para clonar la plantilla oficial sin historial de git.
• El comando npx power-apps init vincula el proyecto con el entorno de Power Platform.
• El archivo power-apps.config.json contiene la vinculación del proyecto con la plataforma.
• Los scripts de npm (dev, build, push) son los comandos del ciclo de desarrollo.