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 usa para realizar la implementación con 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 from template (Crear repositorio a partir de plantilla).

Crear repositorio a partir de plantilla

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.

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.

    Logotipo de Azure

    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 solicitará que inicie sesión en los dos servicios durante el proceso de creación.

  2. En la etiqueta Static Web Apps, seleccione el signo más.

    Nombre de la aplicación

    Nota

    La extensión Azure Static Web Apps Visual Studio Code simplifica el proceso de creación mediante una serie de valores predeterminados. Si desea tener un control preciso del proceso de creación, abra la paleta de comandos y seleccione Azure Static Web Apps: Crear aplicación web estática... (Avanzado) .

  3. La paleta de comandos se abre en la parte superior del editor y le pide que seleccione un nombre de suscripción.

    Seleccione la suscripción y, después, presione, Entrar.

    Selección de una suscripción de Azure

  4. Después, asigne un nombre a la aplicación.

    Escriba my-first-static-web-app y presione Entrar.

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

  5. Seleccione una región cercana.

    Nota

    Azure Static Web Apps distribuye globalmente los recursos estáticos. La región que seleccione determina dónde se ubicarán los entornos de ensayo opcionales y la aplicación de función de las API.

  6. Seleccione los valores preestablecidos que coincidan con el tipo de aplicación.

    Valores preestablecidos de la aplicación: Ningún marco

    Escriba ./src como ubicación de los archivos de la aplicación y presione Entrar.

    Esta aplicación no genera una salida de compilación. Asegúrese de que la ubicación de salida de la compilación esté vacía y presione Entrar.

  7. Una vez creada la aplicación, se muestra una notificación de confirmación en Visual Studio Code.

    Confirmación creada

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

    Esperando la implementación

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

  8. 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 Browse site (Examinar sitio).

    Examinar sitio

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 Explorador de Visual Studio Code, vuelva a la sección Static Web Apps y haga clic con el botón derecho en my-first-static-web-app y seleccione Eliminar.

Eliminar la aplicación

Pasos siguientes