Azure Static Web Apps (SWA) con Azure DevOps

Rate this content
Bookmark

Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.

13 min
29 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

¡Gracias por unirse a nosotros hoy! Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Para comenzar, haga clic en el enlace de documentación para encontrar guías rápidas para varios frameworks. Necesitará una cuenta activa de Azure, que puede crear de forma gratuita. Cree un canal de implementación proporcionando los argumentos necesarios y creando una variable con el token de implementación. Finalmente, para limpiar después del masterclass, regrese al portal de Azure y elimine el grupo de recursos. Los recursos adicionales incluyen documentación completa y cursos gratuitos en Microsoft Learn para Azure Static Web Apps y varios frameworks.

Available in English

1. Introducción a Azure Static Web Apps

Short description:

¡Gracias por unirse a nosotros hoy! Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Presentaré lo fácil que es implementar una aplicación web utilizando Azure DevOps para crear un pipeline. Hemos preparado recursos para que los explores, incluyendo una introducción a Azure DevOps y la construcción de aplicaciones con Azure DevOps. Síguenos en Twitter para obtener más contenido e información sobre próximos eventos. También tenemos el programa Azure Heroes, donde puedes obtener insignias digitales. Para el masterclass, he preparado una publicación de blog con todos los pasos y cuentas necesarias. Siéntete libre de hacer preguntas en el canal de Discord. Las aplicaciones SWA te permiten implementar aplicaciones web en estáticas utilizando Azure. Visita la página de inicio de SWA para obtener más detalles.

Una vez más, gracias por unirse a nosotros hoy. Tendremos un masterclass sobre Azure Static Web Apps con Azure DevOps. Mi nombre es Juarez Barbosa Jr. Trabajo para Microsoft como líder de participación de desarrolladores.

Muy bien. Como dije, en el masterclass, quiero presentarte lo fácil que es implementar este tipo de aplicación web, ya sabes, swa1 y usar Azure DevOps para crear un pipeline. Además, hemos preparado varios contenidos y cosas relacionadas con la conferencia de hoy que puedo compartir contigo. Entonces, como puedes ver aquí, en realidad hemos preparado como parte de nuestros beneficios varios recursos diferentes para compartir contigo. Así que te invito primero a visitar esta página aquí, Microsoft Azure en DevOps.JS, donde tenemos varios recursos diferentes aquí proporcionados, gratuitos, por cierto, ya sabes. Hay una introducción a Azure DevOps como parte de Microsoft Learn, ya sabes. Así que hay un módulo completo aquí, para que puedas explorarlo más allá de lo que tenemos para presentarte aquí hoy. También cómo construir aplicaciones con Azure DevOps. Lo mismo aquí, ya sabes. Hay una ruta de aprendizaje completa aquí con varios cursos diferentes.

Y el último, también te invito a seguirnos en Twitter, ya sabes. Trabajo y soy responsable de las actividades de participación de desarrolladores en Irlanda, ya sabes. Y tenemos este nombre de usuario de Twitter donde publicamos varios recursos de contenido e toda la información sobre los próximos eventos en nuestro boletín de desarrolladores también. Además de eso, también tenemos un programa muy interesante llamado Azure Heroes. Así que en realidad, se trata de insignias digitales basadas en blockchain, ya sabes. Esto es lo que llamamos NFTs hoy en día, ya sabes. Así que te invito a escanear este código QR y luego puedes obtener tu insignia, la de aprendiz. En realidad, para el masterclass de hoy, decidí preparar una publicación de blog, ¿vale? Te guiaré a través de todos los pasos aquí y te explicaré lo que debes hacer y las diferentes cuentas y cosas que debes tener a mano para completar el masterclass de hoy. Y después de eso, estaré atento a tus preguntas en el respectivo canal de Discord. Porque los organizadores del evento, lo cambiaron un poco, así que no habrá una sesión de preguntas y respuestas. No voy a responder preguntas al final, pero estaré atento a tus preguntas en el respectivo canal de Discord. ¿De acuerdo? Como dije, estoy seguro de que has oído hablar de las aplicaciones SWA, ya sabes, aplicaciones web estáticas, la forma en que puedes implementar aplicaciones web en estáticas. Y puedes usar el entorno de Cloud y, por supuesto, Azure para orquestar e implementar esas aplicaciones. Tengo aquí un enlace específico a SWA con la documentación completa, ya sabes, para que puedas

2. Getting Started with Azure Static Web Apps

Short description:

Para comenzar, haz clic en el enlace de documentación para encontrar guías rápidas para varios frameworks. Necesitarás una cuenta activa de Azure, que puedes crear de forma gratuita. De manera similar, para Azure DevOps, crea una organización y un proyecto gratuitos. Proporciona la información necesaria, selecciona una región y completa el desafío. Luego, crea un proyecto con un nombre preferido y selecciona la visibilidad. Haz clic en REPLs, elige el tipo de REPL de Git e importa el proyecto de ejemplo. Finalmente, ve al Portal de Azure, selecciona crear un recurso, busca Static web app y haz clic en crear.

Visítalo más tarde. Esta es la página de inicio de SWA en Azure. Pero si haces clic en la documentación aquí, encontrarás las guías rápidas para Angular, React, Vue.js y otros frameworks en caso de que quieras trabajar con JavaScript básico. Sí, ambos requisitos previos para el masterclass de hoy, necesitarás tener una cuenta activa de Azure. En caso de que no tengas una, puedes crear una de forma gratuita. De acuerdo, solo necesitas hacer clic en este enlace aquí y te dará la oportunidad de comenzar. Y por cierto, aquí tenemos servicios de por vida que son gratuitos. Dependiendo del servicio, por supuesto, pero para los que necesitas para este masterclass, no necesitas gastar nada. Lo mismo ocurre con Azure DevOps, necesitarás crear un proyecto de forma gratuita, en realidad una organización y un proyecto. Cuando visites esta página aquí, debes hacer clic en este botón de inicio gratuito aquí y luego puedes completar los pasos como te mostraré aquí ahora. De acuerdo, este es en realidad el primer paso. De acuerdo, visita Azure DevOps, selecciona iniciar de forma gratuita. De acuerdo, y luego debes crear tu organización de DevOps. De acuerdo, y después de eso, haz clic en el botón continuar. Proporcionarás la información para tu organización aquí. Como puedes ver, mi nombre aquí, Juarez Junior0833, selecciona una región, una región de la nube. De acuerdo, West Europe en mi caso aquí. Por supuesto, debes completar este desafío y luego hacer clic en continuar. Como se explica aquí. Después de eso, se creará tu organización de DevOps. Puedes ver el indicador de progreso aquí. Después de eso, verás una página para crear un proyecto. Puedes proporcionar tu nombre preferido aquí. El mío es DevOpsJSConfSWA, ¿de acuerdo? Y luego seleccionas privado o público, dependiendo de cómo quieras, diría yo, crearlo, por supuesto, y haces clic en el botón crear. Se creará tu proyecto. Puedes ver la página de inicio de Azure DevOps y el proyecto respectivo aquí. Y después de eso, debes hacer clic en los REPLs aquí, archivos. De acuerdo, y luego el tipo de REPL aquí será Git, como puedes ver aquí, y luego proporcionas la URL del proyecto de ejemplo, github.com static web dev vanilla-api.git. Luego haces clic en importar, de acuerdo, el botón importar aquí en la parte inferior, de acuerdo. Y luego veremos otra pantalla de indicador de progreso, de acuerdo. Y tan pronto como termine, verás que el proyecto se importó correctamente, por lo que puedes ver todo el REPL de GitHub replicado aquí y visible. Y luego podemos crear la Azure Static web app, de acuerdo. Entonces, navegas hasta el Portal de Azure, de acuerdo. Si nunca has accedido, es solo un portal.azure.com, de acuerdo. Lo escribes y te llevará al Portal de Azure. De hecho, lo tengo abierto aquí, sí, está aquí, esta es la página de inicio del Portal de Azure, pero volvamos al tutorial aquí. Creo que este, sí, de acuerdo. Entonces seleccionas crear un recurso, de acuerdo. Después de eso, buscas Static web app, de acuerdo. Puedes ver aquí que verás la opción de Static web app en la lista, de acuerdo. La seleccionas, de acuerdo. Y luego haces clic en Static web app, el botón crear, de acuerdo. Después de eso, la página de inicio de Static web apps.

3. Creando el Pipeline de Implementación

Short description:

Debes proporcionar argumentos para los parámetros, como tu suscripción, cuenta, grupo de recursos, plan de alojamiento, región y detalles de implementación. Luego, revisa y crea la implementación. Administra el token de implementación y guárdalo para usarlo más tarde. Crea el pipeline de implementación seleccionando un pipeline de inicio, reemplazando el archivo YM predeterminado y creando una variable con el token de implementación. Guarda y ejecuta el pipeline, y una vez que la implementación sea exitosa, puedes visitar tu Azure Static Web App.

. Debes proporcionar algunos argumentos para los parámetros, ya sabes, y los valores. Por lo general, tu suscripción, ya sabes, según la suscripción y la cuenta que creaste. Un grupo de recursos, puedes usar uno existente, en caso de que estés trabajando con Azure, de lo contrario, puedes crear uno nuevo. Yo creé uno nuevo, Mi aplicación de DevOps. El plan de alojamiento, seleccionas tres, como dije. Seleccionas una región, en mi caso es West Europe. Y luego haces clic en revisar y crear. Puedes ver lo mismo aquí de nuevo, ¿vale? La suscripción, Visual Studio Enterprise, en mi caso. El grupo de recursos, creé uno nuevo, Grupo de recursos de DevOps JS Conf RG, ¿vale? El nombre de la aplicación es Mi aplicación de DevOps, ¿vale? El tipo de plan seleccionado es tres. La región, West Europe, y luego los detalles de implementación, GitHub u otro, debes seleccionar otro, porque importamos el repositorio de GitHub a Azure, como mostré anteriormente aquí, ya sabes, si lo recuerdas. ¿Vale? Después de eso, haces clic en revisar y crear. Se mostrará otra pantalla, ¿vale? Y luego puedes hacer clic en el botón crear, y comenzará el proceso de implementación, ¿vale? Veremos este indicador de progreso de la implementación aquí, y después de eso, habrá un mensaje, ya sabes, con una confirmación sobre la implementación. Luego haces clic en el botón ir al recurso, ¿vale? Después de eso. Y ahora debes administrar el token de implementación, ¿vale? Entonces haces clic en administrar token de implementación, ¿vale? Después de eso, se mostrará un token. Haces clic para copiarlo aquí, ¿vale? Y debes guardarlo porque lo necesitarás en otra pantalla en un paso posterior.

Y ahora podemos comenzar a crear el pipeline de implementación real, ¿vale? Entonces vuelves a Azure DevOps. En REPLs archivos, verás el botón configurar compilación, ¿vale? Haces clic en él, ¿vale? Luego seleccionas como opción un pipeline de inicio, como puedes ver aquí. Después de eso, se mostrará un archivo YM predeterminado, pero debes reemplazarlo con el que te estoy proporcionando aquí. Entonces simplemente lo copias. Y lo proporcionas en el campo correspondiente, ¿vale? Como puedes ver aquí. Y ahora debes crear una variable, ¿vale? Entonces seleccionas variables aquí, ¿vale, a la derecha mano. Luego haces clic en nuevas variables. Perdón. Y luego proporcionas una variable con el nombre de deployment underscore token, ¿vale? Y luego copias el valor del token que copiaste anteriormente, ¿vale? No olvides seleccionar esta casilla aquí, mantener estos valores en secreto, ¿vale? Hay una explicación aquí sobre los diferentes parámetros, ¿vale? Pero voy a omitir eso ahora. Haces clic en OK entonces, ¿vale? Y luego haces clic en guardar, y la variable, el botón guardar aquí en la parte inferior, y se creará la variable, ¿vale? Después de eso, verás la pantalla con el archivo YM nuevamente. Luego haces clic en guardar y ejecutar, ¿vale? Este botón aquí. Y luego habrá un mensaje de confirmación aquí para el inicial. Directamente a la rama principal, por supuesto, pero tal vez puedas jugar con eso más tarde después de este flujo de trabajo y ruta inicial, diría yo, básicos, como variaciones. Luego haces clic en guardar y ejecutar nuevamente en la parte inferior, ¿vale? Y luego se mostrará un mensaje de creación del pipeline, ¿vale? Puedes ver aquí de nuevo un indicador de progreso. Después de eso, tan pronto como la implementación sea exitosa, ¿vale? Estás listo para visitar tu Azure Static Web App.

4. Limpieza de Recursos y Recursos Adicionales

Short description:

Para limpiar tus recursos después de la masterclass, regresa al portal de Azure, selecciona el grupo de recursos correspondiente, elige la opción de eliminar grupo de recursos, proporciona y confirma el nombre del grupo de recursos, y haz clic en el botón de eliminar. Además, he proporcionado documentación completa y cursos gratuitos en Microsoft Learn para Azure Static Web Apps y varios frameworks como React, Svelte, Vue.js y Blazor con WebAssembly.

Entonces regresas nuevamente a tu portal de Azure, como puedo mostrarte aquí. Seleccionas el grupo de recursos y luego puedes seleccionar la aplicación aquí, y luego haces clic en este enlace aquí, ¿vale? Sí, y luego puedes visitar la SWA, la implementada. Y por supuesto, recuerda limpiar tus recursos, ¿vale? Entonces, para hacer eso, después de la masterclass, simplemente vuelves al portal de Azure, haces clic en grupos de recursos nuevamente. Ya sabes, seleccionas el grupo de recursos correspondiente. Aquí puedes ver el que creé para esta masterclass. Luego seleccionas la opción de eliminar grupo de recursos, ¿vale? Y luego debes proporcionar y confirmar el nombre del grupo de recursos. Debes escribir el nombre del grupo de recursos correspondiente aquí nuevamente y hacer clic en el botón de eliminar. Sí, eso es todo. Además de eso, también proporcioné, como dije aquí, la documentación completa. También hay muchos cursos relacionados con Azure Static Web Apps en Microsoft Learn. Por cierto, todos los cursos que proporcioné de Microsoft Learn son gratuitos. Puedes ver aquí sobre diferentes aplicaciones relacionadas con Azure Static Web Apps, React, Svelte, Vue.js, Blazor con WebAssembly. Hay muchas opciones diferentes aquí que puedes explorar más tarde. Sí, pero eso es todo, ¿no?

Watch more workshops on topic

JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!