Ejercicio: Primeros pasos

  • 3 minutos

Azure Static Web Apps publica los sitios web en un entorno de producción mediante la compilación de aplicaciones desde un repositorio de GitHub. En este ejercicio, compilará una aplicación web con el marco de front-end de su preferencia desde un repositorio de GitHub.

Crear un repositorio

Este módulo facilita la creación de un repositorio mediante el uso de un repositorio de plantillas de GitHub. Hay una serie de plantillas disponibles, cada una de las cuales contiene una aplicación de inicio compilada con un marco de front-end diferente.

  1. Vaya a la página para crear desde una plantilla del repositorio de plantillas. Si recibe un error 404 Página no encontrada, inicie sesión en GitHub e inténtelo de nuevo.

  2. Elija una de las cuentas de GitHub en la lista desplegable Propietario.

  3. Asigne al repositorio el nombre my-static-web-app.

  4. Seleccione el botón Create repository from template (Crear repositorio desde plantilla).

Ejecutar la aplicación

Acaba de crear un repositorio de GitHub denominado my-static-web-app en su cuenta de GitHub. Ahora, clonará el repositorio y ejecutará el código localmente en el equipo.

  1. Abra un terminal en el equipo.

  2. Empiece por clonar el repositorio de GitHub en el directorio que quiera de su equipo.

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

  3. Vaya a la carpeta del código fuente.

    cd my-static-web-app

  4. Después, vaya a la carpeta de su marco de front-end de preferencia, como se muestra a continuación.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Ahora, instale las dependencias de la aplicación.

    npm install

    Nota:

    Si obtiene un error Cannot find PATH (No se encuentra la ruta de acceso), asegúrese de que ha instalado Node.js desde https://nodejs.org. Puede que tenga que hacer una instalación personalizada que incluya la instalación de la opción Add to PATH (Agregar a PATH).

    Captura de pantalla que muestra la instalación personalizada de las opciones de Node.js en el asistente.

  6. Por último, ejecute la aplicación cliente de front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Navegar a la aplicación

Es el momento de ver cómo se ejecuta la aplicación localmente. Cada aplicación de front-end se ejecuta en un puerto diferente.

Seleccione el vínculo para ir a la aplicación.

Vaya a http://localhost:4200.

Captura de pantalla en la que se muestra cómo ir a la aplicación web de Angular

Vaya a http://localhost:3000.

Captura de pantalla en la que se muestra cómo ir a la aplicación web de React

Vaya a http://localhost:5000.

Captura de pantalla en la que se muestra cómo ir a la aplicación web de Svelte

Vaya a http://localhost:8080.

Captura de pantalla en la que se muestra cómo ir a la aplicación web de Vue

Nota

En los ejercicios de este módulo, implementará una aplicación sin una API. Consulte la sección Pasos siguientes al final de este módulo para obtener información sobre el siguiente módulo, en el que implementará una API junto con la aplicación.

Ahora, presione CTRL+C en el terminal para detener la aplicación en ejecución.

Pasos siguientes

Ha compilado la aplicación y ya se ejecuta localmente en el explorador.

Ahora la publicará en Azure Static Web Apps.