¡Implemente automáticamente proyectos estáticos con Azure Static Web Apps!
Tags: javascript, vue, staticwebapps, webdev
Published: 2020-05-19 18:09:07

---
title: ¡Implemente automáticamente proyectos estáticos con Azure Static Web Apps!
published: true
description: En este artículo entenderemos un poco más qué son Azure Static Web Apps y, por supuesto, haremos una demostración con Vue.js
series: Aprendendo Azure Static Web Apps
tags: javascript, vue, staticwebapps, webdev 
---

Hola todos! ¿Todo bien? 😃

A partir de hoy, comenzaremos una serie de artículos que yo estaré hablando sobre los últimos lanzamientos de Microsoft durante **[Build 2020](https://mybuild.microsoft.com/)**.

Y uno de esos lanzamientos fue sobre **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)**. Si desea comprender más acerca de este increíble servicio, para qué sirve y cómo comenzar, ¡vos estás en el lugar correcto! ¡Y este artículo vamos hablar sobre eso!

¡Así que, aquí vamos! 😃

## ¿Qué es Azure Static Web Apps?

**[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)** es un servicio que crea e implementa automáticamente aplicaciones web con toda la pila de Azure desde un determinado repositorio en GitHub. ¡Sí, es exactamente lo que estás escuchando! ¡Directamente desde un repositorio de GitHub!😮😮

¿Y cómo funciona este flujo? La imagen nos ayuda a comprender mejor cómo funciona:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9w83bqq6wrv6qz27ez7p.png)

Como podemos ver en la imagen, se puede ver que se crea el flujo de trabajo para implementar aplicaciones **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)** que se crea en función de las interacciones y flujos de GitHub. En pocas palabras: cuando configura un flujo de trabajo específico a través de las acciones de GitHub a través de su repositorio donde se encuentra su código o aplicación, en el momento en que envía un push o acepta una solicitud de Pull Request que sea monitoreada por Actions, automáticamente su aplicación se implementa automáticamente en Azure! Increíble ¿no? 😄

## Y este servicio ... ¿es Gratis?

Si! ¡La respuesta es un gran **SÍ**!

¡La hospedaje de aplicaciones estáticas como HTML, CSS, JavaScript y las imágenes son completamente gratis!! Sí! ¿Conoces alguno web sitio  particular tuyo o aplicación estática hecha en un JamStack que vos tienes y no sabes dónde ponerlo gratis? ¡Ahora saben dónde hospedar gratis! ¡Directamente en **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)**! 

Entre otras cosas muy interesantes que se incluyen en este servicio y que son gratuitas:

* ✅ **Soporte e integración de Azure Functions**
* ✅ **Integración con GitHub**
* ✅ **Certificados SSL gratuitos**
* ✅ **Generación de versiones Staging**

Si desea comprender un poco más sobre este flujo y las características principales de este nuevo servicio, le recomiendo la **[Documentación Oficial Azure Static Web Apps - AQUÍ](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)**

## ¿Qué lenguajes de programación y frameworks están disponibles en este servicio?

Todos los frameworks y sitios de generadores JamStack. Para enumerar:

* ✅ **[Angular](https://angular.io/)**
* ✅ **[React](https://reactjs.org/)**
* ✅ **[Vue](https://vuejs.org/)**
* ✅ **[Gatsby](https://www.gatsbyjs.org/)**
* ✅ **[Hugo](https://gohugo.io/)**
* ✅ **[VuePress](https://vuepress.vuejs.org/)**
* ✅ **[Next.js](https://nextjs.org/)**
* ✅ **[Nuxt.js](https://nuxtjs.org/)**

Y si está en el lado de Back-End, se usa **[Azure Functions](https://azure.microsoft.com/services/functions/?WT.mc_id=staticwebapps-devto-gllemos)**. ¡Pero, sobre eso hablaremos en el próximo artículo! 😉

Bueno ... creo que dije demasiado aquí ... vamos a la demo?

## Demo Time!!

Para esta demostración, necesitaremos los siguientes recursos:

* ✅ **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=staticwebapps-devto-gllemos)**
* ✅ **[Vue](https://vuejs.org/)**
* ✅ **[Cuenta Azure](https://azure.microsoft.com/free?WT.mc_id=staticwebapps-devto-gllemos)**
* ✅ **[Cuenta GitHub](https://github.com/)**

##### Azure for Students ⭐️

> Si eres estudiante en cualquier universidad, se puede crear su cuenta de Azure for Students **[Azure for Students](https://azure.microsoft.com/pt-br/free/students/?WT.mc_id=staticwebapps-devto-gllemos)**. Esta cuenta le dará el beneficio en tener un crédito de $ 100 para usar los servicios de forma gratuita, sin tener necesidade una tarjeta de crédito. Para activar esta cuenta, haga clic: **[AQUÍ](https://azure.microsoft.com/pt-br/free/students/?WT.mc_id=staticwebapps-devto-gllemos)**

Para propósitos de demostración, haremos uso del **[GitHub Templates](https://help.github.com/pt/github/creating-cloning-and-archiving-repositories/creating-a-template-repository)**. Si desea obtener más información sobre cómo crear un template y comprender qué es puede mirar un poco más **[AQUÍ](https://help.github.com/pt/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template)**.

Haga clic en este enlace **[https://github.com/staticwebdev/vue-basic/generate](https://github.com/staticwebdev/vue-basic/generate)** y luego vos crear el repositorio, inmediatamente poner un nombre para este repositorio, como se muestra en la imagen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jsj24yxq4e4pezwiqc0k.PNG)

Ahora haga clic en el botón **Create Repository from Template**. Después de eso, se creará una aplicación modelo en Vue.js para que podamos probar nuestra aplicación directamente desde GitHub.

Ahora, vayamos al siguiente paso. Abra el **[Portal Azure](https://azure.microsoft.com/free/?WT.mc_id=staticwebapps-devto-gllemos)** y siga estos pasos:

1. Haga clic en: Crear un recurso
2. Luego escriba: Static Web Apps 

Y poco después aparecerá esa ventana:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kxsl7fi8r2qbrsw2kgbg.PNG)

> obs.: version preview

¡Ahora completemos toda la información necesaria para crear nuestro recurso dentro de Azure! Veamos en la imagen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wpj13mhhts8ok14okxoc.PNG)

Observe el botón **Sign in with GitHub**. ¡Aquí es exactamente donde integraremos Azure Web Static Apps con nuestra aplicación en GitHub! Haga clic en este botón e incluya su handler y contraseña de GitHub y haga clic en: **Authorize Azure-App-Service-Static-Web-Apps**.

Volveremos al Portal Azure y aparecerá más informaciones para que la incluyamos. Vamos a incluirlo ahora, para eso, miren la imagen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jx62cybt7nz55njorgl9.PNG)

Tenga en cuenta que en el acto que permitimos y autorizamos  Azure Static Web Apps, podemos enumerar todos los repositorios. Bueno, como ya hemos creado una aplicación modelo, utilizaremos el repositorio: **[aswa-demo-vue](https://github.com/glaucia86/aswa-demo-vue)**. Y luego haga clic en el botón: **Next -> Build**

Una ventana nueva aparecerá. Aquí es donde incluiremos las informaciones más importantes:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/buyu1vaac81wi7d0opvw.PNG)

1. Incluya **/** en App Location.
2. Ahora remover el valor **api**
3. E incluya la carpeta que genera los archivos estáticos de tu aplicación. En el caso de Vue.js, es la carpeta **dist**.
4. Haga clic en el botón: **Review + Create** e depois **Create**

Se abrirá una nueva ventana informando que la implantación del Recurso se creó con éxito y luego simplemente haga clic en: **Go to Resource**

Antes de ver nuestra aplicación en la web, quiero mostrarles algo muy interesante que fue creado en nuestro repositorio después de realizar esta implementación.

Regrese al repositorio de la aplicación y observe que se ha creado una carpeta llamada: **.github/workflows**. Haz click ahí!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uey7040jx5p6g9akcovl.PNG)

¡Tenga en cuenta que creó un archivo **.yml** con todo el flujo del GitHub Actions para nosotros en el momento de la implementación!

Vamos a probar este flujo? Para hacer esto, haga clic en Actions en el repositorio como podemos mirar en la imagen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qmbiw1ij088xbvtp1ky3.PNG)

¡Excelente! ¡Ahora mira una cosa hermosa! Ya crea todo un proceso de C.I y C.D para nosotros automáticamente. Así que, cada vez que vamos a hacer un push, Pull Request o commit, generará una compilación e implementará esta aplicación. Sensacional, ¿no?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6yrln0s67hr8m91f2ms1.PNG)

¿Quieres ver la aplicación en la web? No hay problema. Volvamos al Portal de Azure donde se creó el recurso y haga clic en: **URL** y vea el resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5lu4hqhgyg13d7hlqxmq.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hpdb89bg7hbvck8mfv2i.PNG)

Genial, ¿no? Pero, ¿qué se pasa si esa aplicación tiene un Back-End?

¡Dejémoslo para el próximo artículo!

## Conclusión

Ahora es muy fácil implementar automáticamente sus aplicaciones estáticas con Azure Static Web Apps. Y si quieres saber un poco más sobre este nuevo servicio, te dejo una increíble lista de recursos, enlaces, videos y documentación que te ayudarán en tu conocimiento:

* ✅ **[Documentación oficial de Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Curso Gratuito: publique una aplicación estática en Angular, React, Vue o Javascript y API](https://docs.microsoft.com/learn/modules/publish-app-service-static-web-app-api/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Crear y publicar un web sitio estático con Gatsby](https://docs.microsoft.com/learn/modules/create-deploy-static-webapp-gatsby-app-service/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Implementación de Azure Static Web Apps en Gatsby](https://docs.microsoft.com/azure/static-web-apps/publish-gatsby/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Implementación de Azure Static Web Apps en Hugo](https://docs.microsoft.com/azure/static-web-apps/publish-hugo/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Implementación de Azure Static Web Apps en VuePress](https://docs.microsoft.com/azure/static-web-apps/publish-vuepress/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Implementación de Azure Static Web Apps en Next.js](https://docs.microsoft.com/azure/static-web-apps/publish-vuepress/?WT.mc_id=staticwebapps-devto-gllemos)**

* ✅ **[Implementación de Azure Static Web Apps en Nuxt.js](https://docs.microsoft.com/azure/static-web-apps/deploy-nuxtjs/?WT.mc_id=staticwebapps-devto-gllemos)**

Y para saber esta y otras novedades, ¡sígueme en Twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

¡Hasta muy pronto! ❤️ ❤️ ❤️