Azure Static Web Apps (SWA) with Azure DevOps

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.

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.

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.

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.