Anterior

Siguientes

Ejercicio: Primeros pasos

Completado

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

   

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.

Vaya a http://localhost:3000.

Vaya a http://localhost:5000.

Vaya a http://localhost:8080.

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.

Continuar