Inicio rápido: creación del primer sitio estático con Azure Static Web Apps

Azure Static Web Apps publica un sitio web mediante la creación de una aplicación desde un repositorio de código. En este inicio rápido se implementa una aplicación en Azure Static Web Apps mediante la extensión de Visual Studio Code.

Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.

Requisitos previos

Creación de un repositorio

En este artículo se usa un repositorio de plantillas de GitHub para facilitar los primeros pasos. La plantilla incluye una aplicación de inicio que se implementa en Azure Static Web Apps.

  1. Vaya a la siguiente ubicación para crear un repositorio:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Asigne el nombre my-first-static-web-app al repositorio.

Nota

Azure Static Web Apps requiere al menos un archivo HTML para crear una aplicación web. El repositorio que se crea en este paso incluye un solo archivo index.html.

Seleccione Create repository (Crear repositorio).

Screenshot of the Create repository button.

Clonación del repositorio

Con el repositorio creado en su cuenta de GitHub, clone el proyecto en la máquina local mediante el siguiente comando.

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

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

Después, abra Visual Studio Code y vaya a Archivo > Abrir carpeta para abrir el repositorio clonado en el editor.

Instalación de la extensión de Azure Static Web Apps

Si aún no tiene la extensión Azure Static Web Apps para Visual Studio Code, puede instalarla en Visual Studio Code.

  1. Seleccione Ver>Extensiones.
  2. En Buscar extensiones en Marketplace, escriba Azure Static Web Apps.
  3. Seleccione Instalar para Azure Static Web Apps.
  4. La extensión se instala en Visual Studio Code.

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

  1. En Visual Studio Code, seleccione el logotipo de Azure en la barra de actividades para abrir la ventana extensiones de Azure.

    Azure Logo

    Nota:

    Tendrá que iniciar sesión en Azure y GitHub en Visual Studio Code para continuar. Si todavía no está autenticado, la extensión le solicita que inicie sesión en los dos servicios durante el proceso de creación.

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

  3. Escriba Crear aplicación web estática en el cuadro de comandos.

  4. Seleccione Azure Static Web Apps: Crear aplicación web estática....

    Configuración Value
    Nombre Escriba my-first-static-web-app.
    Region Seleccione la región más cercana a la suya.
    marco seleccione Personalizada.
  5. Escriba los valores de configuración para que coincidan con la opción preestablecida del marco.

    Configuración Value
    Ubicación del código de la aplicación Escriba /src
    Ubicación de la compilación Escriba /src
  6. Una vez creada la aplicación, se muestra una notificación de confirmación en Visual Studio Code.

    Created confirmation

    A medida que la implementación está en curso, la extensión Visual Studio Code le informa del estado de compilación.

    Waiting for deployment

    Cuando se complete la implementación, puede navegar directamente al sitio web.

  7. 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 Examinar sitio.

    Browse site

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante la extensión.

En la ventana de Azure de Visual Studio Code, vuelva a la sección Recursos y en Static Web Apps, haga clic con el botón derecho en my-first-static-web-app y seleccione Eliminar.

Pasos siguientes