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

• GitHub
• Cuenta de Azure
• Visual Studio Code
• Extensión de Azure Static Web Apps para Visual Studio Code
• Instalación de Git

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.

Seleccione Create repository from template (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.

   

   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.

   

   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.

   

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

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

   

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.

   • Ningún marco
   • Angular
   • React
   • Vue

   

   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.

   

   A medida que la implementación está en curso, la extensión Visual Studio Code le informa del estado de compilació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).

   

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.

Pasos siguientes