Ejercicio: Primeros pasos

  • 7 minutos

En este ejercicio, creará una instancia de Azure Static Web Apps, con una acción de GitHub que compila y publica automáticamente el sitio web.

En este módulo se usan los recursos disponibles por medio del espacio aislado, que proporciona acceso gratuito y temporal a una suscripción de Azure, junto con los recursos que necesita para completar los ejercicios. Asegúrese de activar el espacio aislado en la parte superior de esta página. Al trabajar con los ejercicios de este módulo, cada unidad depende del contenido que ha creado en un ejercicio anterior. Por este motivo, seleccione un marco de JavaScript y úselo para todos los ejercicios posteriores.

Creación de un repositorio

Para empezar, creará un repositorio mediante una plantilla de GitHub. Hay una serie de plantillas de repositorio disponibles que contienen una aplicación de inicio implementada en varios marcos de front-end.

  1. Vaya a la página para crear desde una plantilla de GitHub para abrir el repositorio de plantillas.

  2. Si se le solicita un propietario, seleccione una de las cuentas de GitHub.

  3. En repository name (nombre del repositorio), escriba my-static-web-app-and-api.

  4. Seleccione Create repository from template (Crear repositorio a partir de plantilla).

    Al crear el proyecto a partir de una plantilla, GitHub compila el repositorio en segundo plano.

Ejecución de la aplicación localmente

Ahora tiene un repositorio de GitHub denominado my-static-web-app-and-api en la cuenta de GitHub. Ahora, clonará el repositorio de GitHub y ejecutará el código localmente en el equipo.

  1. Abra una ventana del terminal en el equipo.

    Si está en Windows, puede escribir cmd en el cuadro de búsqueda de la bandeja del sistema.

  2. Para clonar el repositorio en la máquina, pegue el código siguiente en la ventana del símbolo del sistema.

    Asegúrese de reemplazar <YOUR_GITHUB_USERNAME> por el nombre de usuario de GitHub.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    Nota:

    Si tiene problemas para copiar en el terminal del símbolo del sistema, haga clic con el botón derecho en el icono de la barra de título y, en la pestaña Propiedades, asegúrese de que la opción Usar Ctrl+Mayús+C/V como Copiar y pegar está activada.

  3. Cambie al directorio del código fuente que ha clonado.

    cd my-static-web-app-and-api

  4. Vaya al directorio del marco de front-end que prefiera.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Instale las dependencias de la aplicación.

    npm install

  6. Asegúrese de que la última versión de cada dependencia esté instalada con el comando siguiente.

    npm audit fix

  7. Ejecute la aplicación cliente de front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Navegar a la aplicación

Cuando se genera y compila la agrupación de aplicaciones, se abre automáticamente una pestaña del explorador para mostrar la aplicación que se ejecuta localmente.

El host local para Angular es http://localhost:4200.

Screenshot of the local host for your Angular web app.

El host local para React es http://localhost:3000.

Screenshot of the local host for your React web app.

El host local para Svelte es http://localhost:5000.

Screenshot of the local host for your Svelte web app.

El host local para Vue es http://localhost:8080.

Screenshot of the local host for your Vue web app.

La aplicación debería indicar Cargando datos…, ya que todavía no hay ningún dato ni API. Agregará la API de la aplicación web más adelante en esta lección.

En el terminal, presione Ctrl+C para detener el trabajo por lotes.

¡Enhorabuena! Ha compilado la aplicación y ha visto que se ejecuta localmente en el explorador. Ahora puede publicar la aplicación en Azure Static Web Apps.

Creación de una aplicación web estática

Ha creado su propio repositorio de GitHub. Ahora puede crear su propia aplicación web estática mediante la extensión Azure Static Web Apps para Visual Studio Code.

Instalación de la extensión Azure Static Web Apps para Visual Studio Code

  1. Abra Visual Studio Code.

  2. En el menú superior, seleccione Ver>Extensiones, y escriba Azure Static Web Apps en el cuadro de búsqueda.

  3. Cuando la pestaña de la extensión se cargue en Visual Studio Code, seleccione Instalar.

Abra la carpeta de la aplicación.

  1. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

  2. Escriba Archivo: Abrir carpeta...

  3. Seleccione la carpeta my-static-web-app-and-api.

  4. Seleccione Abrir para abrir la carpeta en Visual Studio Code.

Inicio de sesión en Azure en Visual Studio Code

  1. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

  2. Escriba Azure: Iniciar sesión y siga las indicaciones para autenticarse.

    Importante

    Asegúrese de iniciar sesión en Azure con la misma cuenta que usó para activar el espacio aislado en el explorador. El uso de la misma cuenta hace que la suscripción de Concierge esté disponible, lo que le proporciona acceso a los recursos gratuitos de Azure durante este tutorial.

Seleccione su suscripción.

  1. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

  2. Escriba Azure: Seleccionar suscripciones y borre todas las selecciones excepto Suscripción de Concierge.

    Screenshot showing concierge subscription is selected.

Confirmación de cambios

Al instalar las dependencias de la aplicación, algunos de los archivos del proyecto se actualizaron. Para continuar, debe confirmar esos cambios en el repositorio.

  1. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

  2. Escriba y seleccione Git: Confirmar todo.

  3. Escriba confirmación inicial en la parte superior del archivo.

  4. Guarde y cierre el archivo de confirmación de Git.

    No se preocupe por sincronizar los cambios con el servidor en este momento. Las actualizaciones se copian en GitHub al publicar la aplicación web estática.

Creación de la aplicación web estática

Para crear una aplicación web estática, se requieren sesiones autenticadas de Azure y GitHub actuales. Si aún no ha iniciado sesión en ambos proveedores, la extensión le pedirá que inicie sesión durante el proceso de creación.

  1. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

  1. Escriba y seleccione Azure Static Web Apps: Crear aplicación web estática...

    Escriba los valores siguientes para el resto de solicitudes de la paleta de comandos.

    Prompt Value
    Subscription Seleccione Suscripción de Concierge
    NOMBRE Escriba my-static-web-app-and-api
    Region Seleccione la región más cercana a la suya
    Valor preestablecido Seleccione Angular
    Ubicación del código de la aplicación Escriba angular-app
    Ubicación del resultado Escriba dist/angular-app

  1. Escriba y seleccione Azure Static Web Apps: Crear aplicación web estática...

    Escriba los valores siguientes para el resto de solicitudes de la paleta de comandos.

    Prompt Value
    Subscription Seleccione Suscripción de Concierge
    NOMBRE Escriba my-static-web-app-and-api
    Region Seleccione la región más cercana a la suya
    Valor preestablecido Seleccione React.
    Ubicación del código de la aplicación Escriba react-app
    Ubicación del resultado Escriba dist

  1. Escriba y seleccione Azure Static Web Apps: Crear aplicación web estática...

    Escriba los valores siguientes para el resto de solicitudes de la paleta de comandos.

    Prompt Value
    Subscription Seleccione Suscripción de Concierge
    NOMBRE Escriba my-static-web-app-and-api
    Region Seleccione la región más cercana a la suya
    Valor preestablecido Seleccione Svelte
    Ubicación del código de la aplicación Escriba svelte-app
    Ubicación del resultado Escriba pública

  1. Escriba y seleccione Azure Static Web Apps: Crear aplicación web estática...

    Escriba los valores siguientes para el resto de solicitudes de la paleta de comandos.

    Prompt Value
    Subscription Seleccione Suscripción de Concierge
    NOMBRE Escriba my-static-web-app-and-api
    Region Seleccione la región más cercana a la suya
    Valor preestablecido Seleccione Vue
    Ubicación del código de la aplicación Escriba vue-app
    Ubicación del resultado Escriba dist

Nota

Este repositorio difiere de otros proyectos que puede que haya usado en el pasado. Este proyecto contiene cuatro aplicaciones diferentes en cuatro carpetas diferentes. Cada carpeta incluye una aplicación creada en un marco de JavaScript distinto. Normalmente, tendría una sola aplicación en la raíz del repositorio y, por tanto, el valor / predeterminado para la ubicación de la ruta de la aplicación. Es un ejemplo excelente de cómo Azure Static Web Apps le permite configurar primero las ubicaciones: para tener control total sobre cómo se compila la aplicación.

  1. Una vez creada la aplicación, se muestra una notificación de confirmación en Visual Studio Code.

    Screenshots of the Open Actions in GitHub or View/Edit Config pop-up window.

    Mientras configura la compilación, Visual Studio Code le informa del estado de la compilación.

    Screenshot showing production status as waiting for deployment.

  2. Para ver el progreso de la implementación mediante las acciones de GitHub, expanda el menú Acciones.

    Screenshot showing how to see GitHub Actions.

    Una vez completada la implementación, puede navegar directamente al sitio web.

  3. Para ver el sitio web en el explorador, haga clic con el botón derecho en el proyecto en la extensión de Static Web Apps y seleccione Browse site (Examinar sitio).

    Screenshot showing how to use the Visual Studio Code extension to browse the static web app.

    La aplicación debería indicar Cargando datos…, ya que todavía no hay ningún dato ni API. Agregará la API de la aplicación web más adelante en este módulo.

Felicidades. La aplicación se implementa en Azure Static Web Apps.

Nota:

No se preocupe si ve una página web que indica que la aplicación aún no se ha compilado e implementado. Pruebe a actualizar el explorador al cabo de un minuto. El servicio Acciones de GitHub se ejecuta automáticamente cuando se crea la instancia de Azure Static Web Apps. Por lo tanto, si ve la página de presentación, la aplicación todavía se está implementando.

Incorporación de los cambios desde GitHub

Incorpore los últimos cambios desde GitHub para eliminar el archivo de flujo de trabajo creado por el servicio Azure Static Web Apps.

  1. Presione Ctrl+Mayús+P para abrir la paleta de comandos.

  2. Escriba y seleccione Git: Extraer.

  3. Presione ENTRAR.

Pasos siguientes

A continuación, aprenderá a compilar y ejecutar la API mediante un proyecto de Azure Functions.