Inicio rápido: Compilación de la primera aplicación con VS Code

Se aplica a: Desarrollador

Use la extensión Visual Studio Code de SharePoint Embedded para crear un tipo de contenedor estándar para la primera aplicación. La extensión también configura la aplicación propietaria, adjunta Azure facturación y registra el tipo de contenedor. A continuación, cree un contenedor y ejecute una aplicación de ejemplo local.

En este artículo se inicia el recorrido de compilación. Para obtener más instrucciones de facturación, consulte Creación y configuración de un tipo de contenedor.

Requisitos previos

Antes de empezar, asegúrese de que tiene:

  • Visual Studio Code instalado.
  • Acceso administrativo a un inquilino de Microsoft 365.
  • Un inquilino con SharePoint disponible.
  • Una suscripción Azure y un grupo de recursos al que puede acceder la cuenta.
  • Permisos de propietario o colaborador en la suscripción de Azure.
  • Node.js y npm instalados para la aplicación de ejemplo.
  • Permiso para conceder el consentimiento del administrador en Microsoft Entra ID.

Importante

Necesita acceso administrativo a un inquilino de Microsoft 365. Si no tiene un inquilino, use el Programa para desarrolladores de Microsoft 365, La experiencia digital del cliente de Microsoft o una prueba de Microsoft 365 E3.

Instalación de la extensión

  1. Abrir Visual Studio Code.
  2. Abra Extensiones desde la barra de actividad.
  3. Busque SharePoint Embedded.
  4. Seleccione Instalar.
  5. Si la extensión ya está instalada, actualícela.
  6. Seleccione el icono de SharePoint Embedded en la barra de actividad.

Iniciar sesión

  1. En la vista De SharePoint Embedded, seleccione la acción de inicio de sesión.
  2. Use una cuenta de administrador de Microsoft 365.
  3. Complete la autenticación en el explorador.
  4. Revise los permisos solicitados.
  5. Seleccione Aceptar para conceder el consentimiento del administrador.
  6. Vuelva a Visual Studio Code cuando se le redirija.

Importante

Revise cuidadosamente la solicitud de consentimiento. La extensión necesita permisos de inquilino para configurar los recursos de desarrollo.

Captura de pantalla de la vista de inicio de sesión de SharePoint Embedded en Visual Studio Code.

Después de iniciar sesión, la extensión muestra la vista principal de SharePoint Embedded.

Captura de pantalla de la vista principal de SharePoint Embedded en Visual Studio Code después del inicio de sesión. En la vista se enumeran las acciones para crear un tipo de contenedor y cargar una aplicación de ejemplo.

Creación de un tipo de contenedor estándar

Un tipo de contenedor define la relación, los privilegios de acceso, la responsabilidad de facturación y los comportamientos seleccionados para un conjunto de contenedores de SharePoint Embedded.

  1. Seleccione Crear tipo de contenedor.
  2. Para el método de facturación, seleccione estándar.
  3. Escriba un nombre de tipo de contenedor.
  4. Siga las indicaciones hasta que se complete la creación.

Captura de pantalla del cuadro de entrada Visual Studio Code que solicita un nombre de tipo de contenedor durante el flujo Crear tipo de contenedor.

Use un tipo de contenedor estándar cuando la organización propietaria de la aplicación pague por el uso de SharePoint Embedded. Para la evaluación, elija prueba. Para la facturación entre clientes e inquilinos, elija la opción de paso a través, que usa la directToCustomer clasificación de facturación.

Creación o selección de la aplicación propietaria

Cada tipo de contenedor tiene una aplicación Microsoft Entra ID propietaria.

  1. Cree una nueva aplicación Microsoft Entra ID o seleccione un identificador de aplicación existente.
  2. Si crea una nueva aplicación, escriba su nombre.
  3. Deje que la extensión configure los valores de desarrollo.

Captura de pantalla del cuadro de entrada de Visual Studio Code que solicita un nombre de aplicación Microsoft Entra ID al crear la aplicación propietaria para el tipo de contenedor.

Precaución

Si selecciona una aplicación existente, la extensión actualiza la configuración de esa aplicación. No use una aplicación de producción para este inicio rápido. Para el modelo, vea Arquitectura de aplicaciones incrustadas de SharePoint.

Configuración de la facturación estándar

Standard tipos de contenedor requieren Azure facturación. La extensión asocia la facturación mediante una suscripción de Azure y un grupo de recursos al que puede acceder su cuenta.

  1. Seleccione una suscripción Azure.
  2. Seleccione un grupo de recursos.
  3. Espere a que la extensión registre el proveedor de recursos Microsoft.Syntex y adjunte la facturación.

Si omite la configuración de facturación o no tiene los permisos de Azure necesarios, el árbol muestra Facturación no configurada. Para finalizar la instalación más adelante, haga clic con el botón derecho en el tipo de contenedor. A continuación, seleccione Asociar facturación.

Registro local del tipo de contenedor

Debe registrar el tipo de contenedor en el inquilino de consumo para que la aplicación pueda crear contenedores o acceder al contenido.

  1. Después de la creación, siga el símbolo del sistema para registrar el tipo de contenedor en el inquilino local.
  2. Si el símbolo del sistema no está visible, haga clic con el botón derecho en el tipo de contenedor y seleccione Registrar.
  3. Revise los permisos.
  4. Conceda el consentimiento del administrador en el explorador.
  5. Vuelva a Visual Studio Code. El registro configura los permisos que la aplicación propietaria puede usar en contenedores del tipo de contenedor.

Captura de pantalla de la extensión de SharePoint Embedded que solicita registrar el tipo de contenedor en el inquilino local, con la acción de registro resaltada.

Creación del primer contenedor

  1. En el árbol de SharePoint Embedded, expanda el tipo de contenedor.
  2. Haga clic con el botón derecho en Contenedores.
  3. Seleccione Crear contenedor.
  4. Escriba un nombre de contenedor.
  5. Confirme que el contenedor aparece en el árbol.

Un contenedor es la unidad de almacenamiento básica y el límite de seguridad en SharePoint Embedded.

Captura de pantalla del árbol de SharePoint Embedded en Visual Studio Code. Se expande un tipo de contenedor, se hace clic con el botón derecho en el nodo Contenedores y se selecciona el comando Crear contenedor.

Captura de pantalla del cuadro de entrada Visual Studio Code que solicita un nombre de contenedor.

Carga de una aplicación de ejemplo

  1. En la vista De SharePoint Embedded, seleccione Cargar aplicación de ejemplo.
  2. Elija un ejemplo de SharePoint Embedded.

Captura de pantalla de la vista principal de la extensión de SharePoint Embedded con la acción Cargar aplicación de ejemplo seleccionada para aplicar scaffolding a una aplicación de ejemplo.

  1. Revise la advertencia sobre los secretos de texto sin formato locales.

  2. Si se le pide que cree un secreto de cliente, seleccione Aceptar para el desarrollo local.

  3. Deje que la extensión rellene el archivo de configuración en tiempo de ejecución.

Importante

La configuración de ejemplo es solo para desarrollo. Almacena los secretos de autenticación en texto sin formato en el equipo local.

Ejecución de la aplicación de ejemplo

Abra un terminal y ejecute la aplicación de ejemplo desde el directorio de ejemplo generado.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

Se inicia el ejemplo:

  • Una aplicación cliente React.
  • Un servidor de aplicaciones Azure Functions.

Espere a que aparezcan ambas salidas de consola.

Luego:

  1. Abra http://localhost:8080.
  2. Inicie sesión con la misma cuenta de administrador de Microsoft 365.
  3. Seleccione Contenedores en la página principal.
  4. Cree contenedores y cargue archivos desde la interfaz de usuario de ejemplo.

Nota:

El inicio inicial puede tardar varios minutos mientras se instalan las dependencias y ambas aplicaciones se compilan.

Solución de problemas de inicio

Síntoma Cheque
Conflicto de puertos La aplicación intenta el siguiente puerto disponible cuando el puerto 8080 está en uso.
Error de dependencias Ejecute npm instally vuelva a ejecutar npm run start .
Error de autenticación Confirme que la aplicación Microsoft Entra ID tiene los URI de redireccionamiento esperados.
Acceso denegado Confirme que el registro y el consentimiento del administrador se han realizado correctamente.
Facturación no configurada Confirme que tiene permisos de propietario o colaborador en la suscripción Azure seleccionada y, a continuación, use Asociar facturación.

Limpieza

Cuando haya terminado de realizar las pruebas:

  1. Quite los contenedores de prueba que ya no necesita.
  2. Revise Azure recursos de facturación que creó para este inicio rápido.
  3. Quite los secretos de ejemplo locales que ya no son necesarios.

Pasos siguientes

Obtenga más información sobre las opciones de tipo de contenedor en Creación y configuración de un tipo de contenedor.

  • Last updated on