Ejercicio: Primeros pasos

  • 7 minutos

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

En este módulo se utilizan los recursos puestos a su disposición a través del entorno de pruebas, que proporciona acceso gratuito y temporal a una suscripción de Azure, junto con los recursos necesarios para completar los ejercicios. Asegúrate de activar el sandbox en la parte superior de esta página. A medida que trabaje en los ejercicios de este módulo, cada unidad depende del contenido que creó en un ejercicio anterior. Por este motivo, seleccione un marco de JavaScript y úselo para todos los ejercicios posteriores.

Crear un repositorio

Para empezar, cree 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 Crear desde plantilla de GitHub.

  2. Si se le solicita Owner, seleccione una de sus cuentas de GitHub.

  3. En Nombre del repositorio, escriba my-static-web-app-and-api.

  4. Seleccione Create repository (Crear repositorio).

    A medida que crea el proyecto a partir de una plantilla, GitHub compila el repositorio en segundo plano.

Ejecución local de la aplicación

Ahora tiene un repositorio de GitHub denominado my-static-web-app-and-api en su cuenta de GitHub. A continuación, clone el repositorio de GitHub y ejecute el código localmente en el equipo.

  1. Abra una ventana de 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 su máquina, copie y pegue el siguiente código en la ventana de comandos.

    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.git

    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 Use Ctrl+Mayús+C/V como Copiar/Pegar está activado.

  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 preferido.

    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 versión más reciente de cada dependencia esté instalada con el comando siguiente.

    npm audit fix

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

    npm start

    npm start

    npm run dev

    npm run serve

Accede a tu 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 servidor local para Angular es http://localhost:4200.

Captura de pantalla del host local para la aplicación web de Angular.

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

Captura de pantalla del host local de la aplicación web de React.

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

Captura de pantalla del host local de la aplicación web de Svelte.

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

Captura de pantalla del host local de la aplicación web de Vue.

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

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

¡Felicidades! Ha compilado la aplicación y lo ha visto ejecutándose localmente en el explorador. A continuación, 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. Abre 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.

Abrir la carpeta de la aplicación

  1. Seleccione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Seleccione Archivo: Abrir carpeta....

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

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

Inicia sesión en Azure desde Visual Studio Code

  1. Seleccione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Escriba Azure: Inicie 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 proporciona acceso a los recursos de Azure gratuitos durante este tutorial.

Seleccione su suscripción

  1. Seleccione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Escriba Azure: Seleccione Suscripciones y desactive todas las selecciones excepto la Suscripción de Concierge.

    Captura de pantalla que muestra la suscripción de concierge seleccionada.

Realizar cambios

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

  1. Seleccione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Escriba y seleccione Git Commit All.

  3. Escriba la 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

Las sesiones autenticadas actuales de Azure y GitHub son necesarias para crear una aplicación web estática. 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. Seleccione F1 para abrir la paleta de comandos de Visual Studio Code.

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

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

    Pronto Importancia
    Suscripción Seleccione la suscripción de Concierge.
    Nombre Escriba my-static-web-app-and-api.
    Región Seleccione la región más cercana a la suya
    Ajuste predefinido 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 siguientes valores para el resto de las indicaciones de la paleta de comandos.

    Pronto Importancia
    Suscripción Seleccione la suscripción de Concierge.
    Nombre Escriba my-static-web-app-and-api.
    Región Seleccione la región más cercana a la suya
    Ajuste predefinido 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 siguientes valores para el resto de las indicaciones de la paleta de comandos.

    Pronto Importancia
    Suscripción Seleccione la suscripción de Concierge.
    Nombre Escriba my-static-web-app-and-api.
    Región Seleccione la región más cercana a la suya
    Ajuste predefinido Seleccione Svelte.
    Ubicación del código de la aplicación Escriba svelte-app
    Ubicación del resultado Escriba public

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

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

    Pronto Importancia
    Suscripción Seleccione la suscripción de Concierge.
    Nombre Escriba my-static-web-app-and-api.
    Región Seleccione la región más cercana a la suya
    Ajuste predefinido 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 a los que podrías estar acostumbrado. Este proyecto contiene cuatro aplicaciones diferentes en cuatro carpetas diferentes. Cada carpeta incluye una aplicación creada en un marco de JavaScript distinto. Típicamente, solo tendrías una aplicación en la raíz del repositorio y, por tanto, el valor predeterminado / para la ubicación de la ruta de acceso de la aplicación. Esta estructura es un excelente ejemplo de cómo Azure Static Web Apps le permite configurar ubicaciones en primer lugar: tiene 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.

    Recortes de pantalla de las acciones abiertas en GitHub o de la ventana emergente Ver o editar configuración.

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

    Captura de pantalla que muestra el estado de producción en espera de la implementación.

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

    Captura de pantalla que muestra cómo ver Acciones de GitHub.

    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 Static Web Apps y seleccione Examinar sitio.

    Captura de pantalla que muestra cómo usar la extensión de Visual Studio Code para examinar la aplicación web estática.

    La aplicación debería indicar Cargando datos…, ya que todavía no hay ningún dato ni API. Añadirás la API a tu 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 está compilada e implementada. Pruebe a actualizar el explorador al cabo de un minuto. El servicio de acción de GitHub se ejecuta automáticamente cuando se crea la aplicación web estática de Azure. Por lo tanto, si ve la página de presentación, significa que la aplicación todavía se está implementando.

Incorporación de los cambios desde GitHub

Extraiga los cambios más recientes de GitHub para reducir el archivo de flujo de trabajo creado por el servicio Azure Static Web Apps.

  1. Para abrir la paleta de comandos, presione Ctrl+Mayús+P.

  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.