Ejercicio: Creación de una aplicación web de inicio

  • 5 minutos

Para crear una aplicación web con la extensión de Azure Static Web Apps, usará un repositorio de plantillas de GitHub para comenzar a trabajar. Los repositorios de plantillas de GitHub son básicamente repositorios que lo tienen todo configurado para una tarea específica, al mismo tiempo que le proporcionan flexibilidad para adaptar lo que necesite.

En este caso, usaremos la plantilla de repositorio Vanilla Basic de Static Web Apps. Antes de continuar, asegúrese de que tiene una cuenta de GitHub y de que ha iniciado sesión en GitHub en un explorador web.

Creación del repositorio de aplicación web

Hay muchas maneras de crear una aplicación web estática en Azure. En unidades posteriores, aprenderá otras maneras. En este módulo, compilaremos una aplicación web simple y la implementaremos mediante Acciones de GitHub.

Para empezar, tendrá que crear un repositorio basado en esta aplicación. Vaya a https://aka.ms/LearnWithDrG/Basketball/TemplateApp y rellene el formulario. Asigne el nombre space-jam-a-new-legacy-app al repositorio. Puede hacer que el repositorio sea público o privado, pero no olvide incluir todas las ramas.

Screenshot that shows how to set up the new web app repo on GitHub.com.

Clonación del repositorio con Visual Studio Code

Nota:

Es posible que se le pida que inicie sesión en Azure o GitHub en los pasos restantes de esta unidad. Si es así, siga las instrucciones para autorizar el acceso de Visual Studio Code a este repositorio específico y a su suscripción de Azure, si le parece adecuado. Esto es necesario para completar el módulo.

Una vez que se ha creado el repositorio, puede clonarlo (hacer una copia en el equipo local) mediante Visual Studio Code. En primer lugar, abra una nueva ventana de Visual Studio Code. Para ello, seleccione Archivo>Nueva ventana.

Abra la paleta de comandos (puede usar el acceso directo CTRL+Mayús+P) y escriba "Git: Clone" (Git: Clonar):

Screenshot that shows the clone repository menu item in Visual Studio Code.

Luego, vuelva a GitHub.com en el repositorio space-jam-a-new-legacy-app, seleccione Código y, luego, seleccione Copiar en Clonar para copiar la dirección URL HTTP:

Screenshot that shows how to get the HTTPS URL of the repo from GitHub.com.

Nota:

La rama complete-code está disponible si la necesita, pero por ahora debe omitirla mientras cree esta aplicación web por su cuenta. No se preocupe, ya que hay mucho código de inicio.

De nuevo en Visual Studio Code, pegue la dirección URL que copió en el símbolo del sistema y presione ENTRAR. Si se le pide, elija una ubicación para descargar el código.

Screenshot that shows the prompt to clone repo in Visual Studio Code.

Si se le pida, elija abrir el código en la ventana actual. Una vez que se han descargado los archivos, Visual Studio Code debería tener el siguiente aspecto:

Screenshot that shows the repository cloned and open in Visual Studio Code.

Creación de una aplicación web estática en Azure con Visual Studio Code

Antes de empezar a modificar la aplicación web, vamos a asegurarnos de que se implementa correctamente con Azure. En Visual Studio Code, seleccione la extensión de Azure. Seleccione el signo más del área de Static Web Apps para crear una aplicación web estática:

Screenshot that shows creating a static web app in Visual Studio Code.

Siga las instrucciones. Acepte todos los mensajes predeterminados, excepto el nombre y la rama de implementación:

  • Nombre de la aplicación web estática: space-jam-a-new-legacy-app
  • Compilación preestablecida: Custom (personalizada)
  • Ubicación del código de la aplicación: ./
  • Ubicación de Azure Functions: ./
  • Ruta de compilación: build
  • Ubicación: WESTUS2 (o lo que le resulte más cercano geográficamente)

Después, se le pedirá que visualice la acción de GitHub asociada a esta aplicación web estática.

Para ir a la página Acciones del repositorio de GitHub space-jam-a-new-legacy-app que creó al principio de esta unidad, seleccione Mostrar acciones.

Screenshot that shows the GitHub action for this web app.

Para ver el flujo de trabajo que se ha generado, seleccione la acción y, luego, Archivo de flujo de trabajo. En esta acción, todo el código que se inserta en la rama principal se implementa en la aplicación web estática que se guarda en el token secreto de GitHub, el que se configuró al conectar el repositorio a Azure en Visual Studio Code.

Para este módulo, lo único que tiene que saber es que, si inserta cambios en la rama principal, los cambios se representarán en la aplicación web estática.

Visualización de la aplicación web directamente en el explorador

El paso final de la instalación consiste en asegurarse de que la aplicación web está activa. De nuevo en Visual Studio Code, en la extensión de Azure, haga clic con el botón derecho en el sitio Producción de space-jam-a-new-legacy-app y seleccione Browse Site (Examinar sitio):

Screenshot that shows locating the browse site menu in Visual Studio Code.

Es posible que tenga que autorizar Visual Studio Code para abrir una ventana o pestaña nueva del explorador. Luego, la aplicación web activa se abrirá en una pestaña del explorador y verá el inicio de una aplicación web de baloncesto del equipo de los Looney:

Screenshot that shows the basketball web app with no functionality in a web browser.

Nota:

Si la acción de GitHub todavía no ha finalizado, verá una página genérica de aplicación web estática en Azure, en lugar de la aplicación Space Jam: Nuevas Leyendas que se muestra en la captura de pantalla anterior. Espere a que la acción finalice y, luego, vuelva a cargar la página para ver la aplicación.

Felicidades. Acaba de implementar una aplicación web estática en Azure. Ahora ha llegado el momento de hacer que la aplicación se pueda usar con los datos.

© 2021 Warner Bros. Ent. Todos los derechos reservados