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 a Developer Engagement Lead. As I said, the workshop I want to present to you how easy it is to deploy web application 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. You can see here, actually, we have prepared as part of our perks, several different resources to share with you. I invite you first to visit this page here, Microsoft azure at devops.js, where we have several different resources here provided. Three ones, by the way. There's an introduction to azure devops as part of Microsoft Learn. 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. There's an entire learning path here with several different courses. The last one, also, I invite you to follow us on Twitter. I work and I'm responsible for the developer engagement activities in Ireland, 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. Actually, it is about blockchain-based badges, digital badges. What we call NFTs nowadays. 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. I will walk you through all the steps here and explain what you have to do, and the different accounts and things that you have on hand to complete the workshop today. 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 going to take questions at the end, but actually watch your questions on the respective Discord channel. As I said, I'm sure you've heard about SWA apps, static web apps, the way that you can actually deploy web application, the static ones, and you can use cloud environments and of course, azure to orchestrate and deploy those applications. I have a link here specific to SWA with the complete documentation 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 Node frameworks in case you want to work with plain vanilla javascript. Yes. But the pre-reqs 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. You just need to click this link here, and we'll give you the opportunity to start. By the way, we have lifelong services here that are free ones. 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. 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. This is actually the first step. Visit azure devops, select Start for Free. Then you have to create your devops organization. After that, click the Continue button. You'll provide the information for your org here, as you can see my name here, JuarezJunior0833. You select a region, a cloud region, West Europe. In my case here, of course, you have to complete this challenge here, and then click Continue as explained here. After that, your devops organization will be created. You can see the progress indicator here. After that, you'll see a page to create a project. You can provide your preferred name here. Mine is DevOpsJSConfSWA. Then you select Private or Public, depending on how you want to, I would say, create it, of course. You click the Create button. Your project will be created. You can see the landing page for azure devops and their respective project here. After that, then you have to click under Rapples here, Files, and then the Rapple type here will be Git, as you can see here. Then you provide the URL for the sample project, github.com static web dev vanilla-api.git. Then you click Import, the Import button here at the bottom. Then we'll see another progress indicator screen. As soon as it finishes, you will see the project imported successfully. You can see the entire GitHub replicated here and visible. Then we can go to create the azure Static Web App. You navigate to azure portal. If you've never accessed it, it's just a portal.azure.com. You type it and it will take you to the azure portal. Actually, I have it open here. Yes, it is here. This is the landing page for azure portal. But let's go back to the tutorial here. I think this one, yes. You select Create a resource. After that, you look for Static Web App. You can see here, you will see the Static Web App option listed. You select it, and then you click Static Web App, the Create button. After that, the landing page for Static web apps will be shown. You have to provide some arguments for the parameters and the values. Usually, your subscription as for the subscription and the account that you've 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 free, as I said. You select a region, my case is West Europe. Then you click Review and Create. You can see the same thing here then again. The subscription, Visual Studio enterprise, my case. The resource group, I created a new one, devops JS Conf RG resource group. The app name is My devops App. The plan type is selected free. The region, West Europe, and then the deployment details, GitHub or other. You should select other because we imported the GitHub repo to azure repos as I've shown previously here, if you remember it. After that, you click Review and Create. Another screen will be shown. Then you can click the Create button. The deployment process will start. We'll see this Deployment in Progress indicator here. After that, there is a message with a confirmation concerning the deployment. Then you click the Go to Resource button after that. Now you have to actually manage the deployment token. You click Manage Deployment Token. After that, a token will be shown. You click to copy it here. You have to save it because you need to use it in another screen in a further step. Now we can start to create the actual deployment pipeline. You go back to azure devops under Repos Files, you will see the bottom setup build. You click it. 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. You just copy it and you provide it to the respective field, as you can see here. Now you have to create a variable. You select variables here on the right-hand side. Then you click New Variable. Then you provide a variable with the name of deployment underscore token. Then you copy the token value that you copied previously. Don't forget to select this checkbox here, keep these values secret. There's an explanation here about the different parameters, but I'm going to skip that now. You click OK then, and then you click Save, and the Save button here at the bottom, and the variable will be created. After that, you will see the screen with the YM file again. Then you click Save and Run, this button here. 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. Then the pipeline creation message will be shown. You can see here a progress indicator again. After that, as soon as the deployment is a successful one, you are ready to visit your azure Static Web App. 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. Yes, and then you can visit the SWA, the deployed one. Of course, remember to pin up your resources. In order to do that, after the workshop, you just go again to azure portal, you click Resource Groups again. You select the respective resource group. Here you can see the one that I created for this workshop. Then you select the Delete Resource Group option. Then you are required to provide and confirm the resource group. 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. You can see here about different apps concerning azure Static web apps, react, svelte, vue.js ones, Blazor with webassembly. There are plenty of different options here that you can explore later. Yes, but that's everything.