Azure Static Web Apps (SWA) with Azure DevOps

Rate this content
Bookmark

Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.

13 min
29 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Thanks for joining us today! We'll have a workshop about Azure Static Web Apps with Azure DevOps. To get started, click the documentation link to find quick starts for various frameworks. You'll need an active Azure account, which you can create for free. Create a deployment pipeline by providing the necessary arguments and creating a variable with the deployment token. Finally, to clean up after the workshop, go back to the Azure portal and delete the resource group. Additional resources include complete documentation and free courses on Microsoft Learn for Azure Static Web Apps and various frameworks.

1. Introduction to Azure Static Web Apps

Short description:

Thanks for joining us today! We'll have a workshop about Azure Static Web Apps with Azure DevOps. I will present how easy it is to deploy a web application using Azure DevOps to create a pipeline. We have prepared resources for you to explore, including an introduction to Azure DevOps and building applications with Azure DevOps. Follow us on Twitter for more content and information about upcoming events. We also have the Azure Heroes program, where you can get digital badges. For the workshop, I prepared a blog post with all the steps and necessary accounts. Feel free to ask questions on the discord channel. SWA apps allow you to deploy web applications on static ones using Azure. Visit the SWA landing page for more details.

Once again, thanks for joining us today. We'll have a workshop about Azure Static Web Apps with Azure DevOps. My name is Juarez Barbosa Jr. I work for Microsoft as our developer engagement lead.

All right. So as I said, the workshop, I want to present to you how easy it is to deploy kind of web application, you know, swa1 and use Azure DevOps to create a pipeline. Also, we prepared several content and things related to the conference here today that I can share with you.

So you can see here, actually we have prepared as part of our perks several different resources to share with you. So I invite you first to visit this page here, Microsoft Azure at DevOps.JS, where we have several different resources here provided, free ones, by the way, you know. So there's an introduction to Azure DevOps as part of Microsoft Learn, you know. So there's an entire module here, so you can explore it beyond what we have to present to you here today. Also how to build applications with Azure DevOps. Same thing here, you know. There's an entire learning path here with several different courses.

And the last one, also I invite you to follow us on Twitter, you know. I work and I'm responsible for the developer engagement activities in Ireland, you know. And we have this Twitter handle when we post several different content resources and all the information about the upcoming events in our developer newsletter as well. Beyond that, we also have a very interesting program called Azure Heroes. So actually, it is about blockchain-based, you know, badges, digital badges. So this is what we call NFTs nowadays, you know. So I invite you to scan this QR code and then you can get your badger, the learner one. Actually for the workshop today, I decided to prepare a blog post, okay. So I will walk you through all the steps here and explain what you have to do and the different accounts and things to have on hand to complete the workshop today. And after that, I'll be watching your questions on the respective discord channel. Because the event organizers, they changed it a little bit, so there will be no Q&A session. I'm not gonna take questions at the end, but actually watch your questions on the respective discord channel. Okay?

So as I said, I'm sure you've heard about SWA apps, you know, static web apps, the way that you can actually deploy web applications on static ones. And you can use Cloud environment and of course Azure to orchestrate and deploy those applications. I have a link here specific to SWA with the complete documentation, you know, so you can visit it later. This is the landing page for SWA on Azure.

2. Getting Started with Azure Static Web Apps

Short description:

To get started, click the documentation link to find quick starts for various frameworks. You'll need an active Azure account, which you can create for free. Similarly, for Azure DevOps, create a free organization and project. Provide the necessary information, select a region, and complete the challenge. Then, create a project with a preferred name and select the visibility. Click on REPLs, choose the Git REPL type, and import the sample project. Finally, navigate to the Azure Portal, select create a resource, search for Static web app, and click create.

But if you click documentation here, you will find the quick starts for Angular, React, Vue.js and Null Frameworks in case you want to work with plain vanilla JavaScript.

Yes, both the prereqs for the workshop today, you need to have an active Azure account. In case you don't have one, you can create one for free.

Okay, you just need to click this link here and it will give you the opportunity to start. And by the way, we have lifelong services here that are free ones. So depending on the service, of course, but for the ones that you need for this workshop, you don't need to spend anything.

Same thing with Azure DevOps, you need to create a project for free, actually an organization and a project. So when you visit this page here, you have to click this start free button here and then you can complete the steps as I'm going to show you here now.

OK, so this is actually the first step. OK, visit Azure DevOps, select start for free. OK, and then you have to create your DevOps organization. OK, and after that, click the continue button. So you'll provide the information for your org here. As you can see my name here, Juarez Junior0833, you select a region, a cloud region. OK, West Europe in my case here. Of course, you have to complete this challenge here and then click continue. OK, as explained here. After that, your DevOps organization will be created. OK, you can see the progress indicator here.

After that, you'll see a page to create a project. OK, so you can provide your preferred name here. Mine is DevOpsJSConfSWA, OK? And then you select private or public, depending on how you want to, I would say, create it, of course, and you click the create button. Your project will be created. You can see the landing page for Azure DevOps and the respective project here.

And after that, then you have to click on the REPLs here, files, OK? And then the REPL type here will be Git, as you can see here, and then you provide the URL for the sample project, github.com static web dev vanilla-api.git. Then you click import, OK, the import button here at the bottom, OK? And then we'll see another progress indicator screen, OK? And as soon as it finishes, you will see the project imported successfully, so you can see the entire GitHub REPL replicated here and visible.

And then we can go to create the Azure Static web app, OK? So you navigate to Azure Portal, OK? If you've never accessed it, it's just a portal.azure.com, OK? You type it and it will take you to the Azure Portal. Actually, I have it open here, yes, it is here, so this is the landing page for Azure Portal, but let's go back to the tutorial here. I think this one, yes, OK. So you select create a resource, OK? After that, you look for Static web app, OK? You can see here you will see the Static web app option listed, OK? You select it, OK? And then you click Static web app, the create button, OK? After that, the landing page for Static web apps will be shown.

3. Creating the Deployment Pipeline

Short description:

You need to provide arguments for the parameters, such as your subscription, account, resource group, hosting plan, region, and deployment details. Then, review and create the deployment. Manage the deployment token and save it for later use. Create the deployment pipeline by selecting a starter pipeline, replacing the default YM file, and creating a variable with the deployment token. Save and run the pipeline, and once the deployment is successful, you can visit your Azure Static Web App.

You have to provide some arguments for the parameters, you know, and the values. So usually your subscription, you know, as per the subscription and the account that you created. A resource group, you can use an existing one, in case you are working with Azure, otherwise you can create a new one.

I created a new one, My DevOps app. The hosting plan, you select three, as I said. You select a region, my case is West Europe. And then you click review and create. You can see the same thing here again, OK? The subscription, Visual Studio Enterprise, my case. The resource group, I created a new one, DevOps JS Conf RG resource group, OK? The app name is My DevOps app, OK? The plan type is selected three. The region, West Europe, and then deployment details, GitHub or other, you should select other, because we imported the GitHub repo to Azure records, as I shown previously here, you know, if you remember it. OK?

After that, you click review and create. Another screen will be shown, OK? And then you can click the create button, and the deployment process will start, OK? We'll see this deployment in progress indicator here, and after that, there is a message, you know, with a confirmation concerning the deployment. Then you click the go to resource button, OK? After that. And now you have to actually manage the deployment token, OK? So you click manage deployment token, OK? After that, a token will be shown. You click to copy it here, OK? And you have to save it because you need to use it in another screen in a further step.

And now we can start to create the actual deployment pipeline, OK? So you go back to Azure DevOps. Under REPLs files, you will see the bottom setup build, OK? You click it, OK? Then you select as an option a starter pipeline, as you can see here. After that, there will be a default YM file shown, but you have to replace it with the one that I'm providing you here. So you just copy it. And you provide it to the respective field, OK? As you can see here. And now you have to create a variable, OK? So you select variables here, OK, on the right hand side. Then you click new variables. Sorry. And then you provide a variable with the name of deployment underscore token, OK? And then you copy the token value that you copied previously, OK? Don't forget to select this checkbox here, keep these values secret, OK? There's an explanation here about the different parameters, OK? But I'm going to skip that now. You click OK then, OK? And then you click save, and the variable, the save button here at the bottom, and the variable will be created, OK? After that, you will see the screen with the YM file again. Then you click save and run, OK? This button here. And then again, there will be a commit message here for the initial one. Directly to the main branch, of course, but you can maybe play with it later after this initial, I would say, basic workflow and path, as variations. Then you click save and run again at the bottom, OK? And then the pipeline creation message will be shown, OK? You can see here a progress indicator again. After that, as soon as the deployment is a successful one, OK, you are ready to visit your Azure Static Web App.

4. Cleaning up Resources and Additional Resources

Short description:

To clean up your resources after the workshop, go back to the Azure portal, select the respective resource group, choose the delete resource group option, provide and confirm the resource group name, and click the delete button. Additionally, I provided complete documentation and free courses on Microsoft Learn for Azure Static Web Apps and various frameworks like React, Svelte, Vue.js, and Blazor with WebAssembly.

So you go back again to your Azure portal, as I can show you here. You select the resource group, and then you can select the application here, and then you click this link here, OK? Yes, and then you can visit the SWA, the deployed one. And of course, remember to clean up your resources, OK?

So in order to do that, after the workshop, you just go again to Azure portal, you click resource groups again. You know, you select a respective resource group. Here you can see the one that I created for this workshop. Then you select the delete resource group option, OK? And then you are required to provide and confirm the resource group. So you have to type the respective resource group name here again and click the delete button. Yes, that's everything.

Beyond that, I also provided, as I said here, the complete documentation. There are plenty of courses also related to Azure Static Web Apps, if you visit Microsoft Learn. By the way, all the courses that I provided by Microsoft Learn are free ones. So you can see here about different apps concerning Azure Static Web Apps, React, Svelte, Vue.js, Blazor with WebAssembly. There are plenty of different options here that you can explore later.

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!