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 a partir de 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 Crear repositorio .

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 recibe un error No se encuentra PATH , asegúrese de que ha instalado Node.js desde https://nodejs.org. Es posible que tenga que realizar una instalación personalizada que incluya la instalación de la opción Agregar a PATH .

    Recorte 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 de la exploración a la aplicación web de Angular.

Vaya a http://localhost:3000.

Captura de pantalla de la navegación hasta tu aplicación web React.

Vaya a http://localhost:5000.

Captura de pantalla de la exploración a la aplicación web de Svelte.

Vaya a http://localhost:8080.

Captura de pantalla de la exploración 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, donde implementará una API junto con la aplicación.

Ahora, detenga la aplicación en ejecución presionando Ctrl-C en el terminal.

Pasos siguientes

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

Ahora la publicará en Azure Static Web Apps.