Static Web Apps demo – CI/CD, Deployment and Test Pipeline on Azure

Hello everybody, please allow me to introduce myself. My name is Vanya Lebedev and I am an engineering manager with the Dynamics 365 supply chain management team at Microsoft Ireland. I have been working at Microsoft for over 12 years, first as a software engineer and then as a manager. I am super thrilled about the opportunity to join the TestJS Summit today and to talk about engineering at Microsoft. So I will be sharing my personal view, perspective and experience on the topic. I will dive into why I find Microsoft special and what kept me going for these 12 years. I'll talk about the engineering challenges that my team is currently solving and about the engineering opportunities in the team. So I hope you'll find it interesting. So let's get started. Everyone knows Microsoft. We have a long history of building products that got adopted all around the world. And this is probably the main reason why I joined the company back in 2009. It was a fantastic opportunity to learn what it's like to work in one of the most famous companies in the world. So I joined and never regretted it. The engineering challenges for sure have been exciting so far and I've been having a really great time in the process of solving them. One of the best things for me personally is that I've been working on products that are truly needed that make a difference for thousands of organizations around the world and for hundreds of thousands of people in these organizations. Our CEO, Satya Nadella, has expressed this ambition in the mission statement that you see on the screen right now. We want to empower every person and every organization on the planet to achieve more. This statement excites me personally very much, specifically because of the ambition, because of the scope of this vision. Think about it. It's every person on the planet. This is the scope of the reach that we are trying to achieve. This is a truly global endeavor. And you know what? Having a great goal is great, but another thing that really, really inspires me, really gets me going is that not only do we have a vision of where we are going, but we also have a clear understanding of how we will be getting there. One smart man said that culture is strategy for breakfast. And it's very true. I think that it is the people around me and the culture that we all share that is and will be the cornerstone of Microsoft's success. Everyone in the company, everyone around me is encouraged to always be curious, eager to learn, to take risks. And another thing that's really great is that everyone is also encouraged to not be afraid of making mistakes along the way. Because if you don't make mistakes, if you don't take risks, we will not make a difference. However, if we do make the mistakes, we will learn, we will get better and we will create revolutionary software. So this is the culture. These are the messages that are really resonating with me. And as part of this growth mindset, we are also trying to get obsessed with the customers, to get out of our way of understanding what their real needs are. We will not assume that we have learned everything, we know everything, but we will keep learning and learning and learning about them, ultimately creating better products and making a difference. Same goes for diversity and inclusion. We are a team, which is so global, you cannot imagine. People from around the world with all different backgrounds, genders, etc. are very welcome in the team and everyone brings a unique perspective. And there were so many examples in my career when their opinion, their ideas, these diverse ideas helped us to produce better software, better products and ultimately succeed. So this is something that I think is very unique and very inspiring about my work. This is why I keep going. And another thing that really stands out to me about work at Microsoft is that the culture like this, the culture that I was just describing, does not come up on its own, does not emerge on its own. It requires a strong vision and strong leadership and collective effort. And to accelerate our culture, we have introduced this vision of what are the great leaders in the organization. And we believe that everyone, every engineer, every person in the work should be a leader. Otherwise, we will not be able to progress as fast as we want to. We will not be able to shape our culture. We will not be able to build the products that we need. And it's really great when people start adopting this mindset. This is something that really helps us to get things done. People do not sit in the corner and complain. Everyone takes their fate in their hands and makes a difference, makes a change. This really helps driving a great, healthy, efficient engineering organization. So this is something I really, really like. And yeah, it was a lot of words, but what about some concrete examples? I think one great example of how Microsoft is promoting this growth mindset are the yearly hackathon events. For three days, everyone in the org, every engineer in the org just goes completely in a completely dark mode with pizzas and everything to hack their ideas and produce code applications, improvements that they have been thinking about for a long time. Let's have a quick look at the recording of what can be achieved. Here we go. This is a great example of how Microsoft is promoting this growth mindset. Yeah. So this is what can be achieved with hackathons. I personally have been participating for the last five years. Every time it was an amazing experience and we always came up with great ideas and had an amazing time doing this. But yeah, again, it was a lot of words, a lot of cultural things, but we are all engineers here. You're probably curious, okay, what are the engineering challenges? What is your team doing? So our team is focusing on bringing supply chain management applications to enterprises. We are focusing on the business applications side of things. And this is a small slide which shows what kind of areas we are covering. So our applications cover sales, procurement, manufacturing, cost accounting, supply and demand planning, warehousing, transportation, finance, tax. You can see on the slide. Just reading the titles of the applications that comprise the suite of our products is immense. And if you think about the size of the product, it's tens of thousands of types of persistent entities. It's hundreds of thousands of classes, millions of automated tests. The team that is needed to build software like this is a few thousand people, a few thousand engineers. Currently, my team is responsible for a smaller piece of this application. Primarily, we are focusing on intelligent order management, on field service, and on supply chain planning capabilities. But the engineering challenges are many. So we are targeting upper midsize to global enterprise companies. And with a company size like this, performance and scalability requirements are insanely hard to meet. Another interesting challenge is how do we integrate so many applications into a suite that would have a seamless look and feel and would be integrated seamlessly to give the users easy and efficient experience. And of course, user experience itself. So how do we make this application as delightful as possible? So luckily, we are tapping into the power of the Microsoft cloud to build this suite of applications. And we are using the latest and the greatest technology to achieve this. Power Apps is the platform that sets up the framework for our development. We are also embracing the microservice architecture as a means of scaling out independently, releasing independently, making sure that our... All right. Welcome to our workshop about javascript. My name is Juarez Barbosa Jr. I'm the azure Developer Engagement Lead in Microsoft. Here you can see my contact details. You know, my Medium channel, also Twitter handle, and my LinkedIn profile. So in case you want to, I would say, ask me questions after the workshop today, feel free to approach me. Okay. So without further ado, let's start. Just to talk a little bit about my profile. I have 25 years of experience in IT in several different roles in engineering, as a software architect, solutions architect, you know, and 10 years in developer relations, developer community, advocacy, and marketing. In the past, I acted as a Nokia developers champion and community member, also an evangelist for IBM Mobile and the global top lead for their mobile platform. I've worked for IBM also concerning the IBM cloud and the cloud Group, and also as a Watson evangelist and as the technical work star for Europe, and also Oracle in EMEA concerning the developer relations team, and now Microsoft in Nylon. Currently I've been focusing on cloud, devops, Java, which is my primary programming language somehow, but also javascript, Golang, iot, mobile, and also blockchain. Okay. So let's talk a little bit about the opportunity here. We prepared some technical resources for you today. So I'm going to give you, I would say, some time to scan this QR code or visit this Aka.ms link here, where you can find all the resources related to one of our labs today. Okay. We are talking about azure Static web apps, and also testing with Playwright, which is an open source framework created by Microsoft. So please scan this QR code in case you are interested in learning more about the technical content here. And also we have a channel on Twitter, Microsoft Developers Ireland, and there we post about the upcoming events and also the rich content that we have in Microsoft, some free courses that are available as part of Microsoft Learn and so on. Talking a little bit about the agenda, then, we started with Vanya with a presentation about software engineering at Microsoft. Then we'll have a quick demo now. I'm going to, I would say, perform all the steps concerning the couple of labs that we have today. I'm going to start now with the one related to azure Static web apps, including continuous integration and delivery. Also build a deployment, github actions, everything. And then we'll have a quick intro lab about Playwright as well, which is somehow, I would say, based on just JS, the testing library, but there are some extensions. We are going to talk about that shortly. So without further ado, let's start. So yes, I have my VS Code open here. Let me show you the first lab. And I'm going to share that on the IM window so you can have a look as well. But I'll give you time to complete the tasks. So if you don't mind, let's try to follow the activities here first. So this is the tutorial about azure Static web apps, actually a blog post. I summarized all the steps, so you don't have to go through all the extensive documentation that we have. The first thing here, we have some prereqs. So I'm going to give you perhaps 15 minutes or so to install all the tools. But you don't have to do that now because I have them installed here for you. So I can just walk you through the steps and everything. But you have, I would say, plenty of time to address the prereqs as well. OK. We will need a GitHub account. We'll need an extension for Visual Studio Code that's specific to azure SWA, an azure account, and you can, in case you don't have one, you can create a free account with us. OK. Visual Studio Code. OK. That's the IDE, at least the one that I'm going to use here today. But of course, you can use our preferred one. It's easy to adapt it. There's nothing specific to the VS Code here apart from the extension. Also a Git, of course. OK. So the first step here is to create a Git repo. OK. And we can actually host the sample code. Actually, the code here, there's nothing elaborated here, just a simple web page and a css file. OK. But you can then visit this URL here and provide a name for your project. And I have mine created here somewhere. Let me show you. OK. Let me close this, this, this, and this. I think it is here. Oh, sorry. OK. So this is the repo. OK. Actually, the GitHub action. But you can see the repo here. It is a simple one. OK. With a source folder and a couple of files, as I said. OK. Let's go back. After that, of course, you create a repo. OK. For the SWA application, we'll have the repo created, as you can see. OK. As I said, not, I would say, a full-fledged project. You know, so just a simple example, because the focus here, of course, I advocate for azure. So I want to show you how easy it is to create a static web app and apply that to azure, you know, with a few steps. And also have a CI, CD, you know, GitHub, Actions, and everything else as part of that. OK. We have to clone the repo, of course, locally. OK. In order to replace your GitHub account name here, OK, and I have mine here. OK. So I started CMD, and then I can, I would say, navigate to the right directory, and then I can clone the repo story. I have it here open for you, and you can see the same source code here with a couple of files, right? Hello. You have stopped sharing your screen. Oh, sorry. Oh, my God. What happened here? OK, cool. Thank you so much. Yeah, let me go back here then. Yes, I talked about the remote repo, OK, that we need to complete the task here. Also, you can see it here after I created it. OK. We have just a single file. Of course, you have to create a local directory and then clone the repo. OK. I have the tabs here for you. You can see mine here, OK, with a couple of files as well. And then after that, we can start and create the static web app. OK. So let's go to VS Code here. I have the project here, of course. OK. First thing, you have to authenticate against azure. OK. So you can see this icon here, azure, and then you can click it. You'll see that actually mine is already authenticated here because my subscription is here. OK. But it's an easy step. And I have, I would say, all the screenshots and everything here for you. OK. You click here and then you authenticate against it and then you have it authenticated. OK. Second step, then I have to create a static web app. So you select this specific section here, SWA. OK. And then you click the plus sign. Right. And then you have to provide a name for your static web app because this one here now, I'm going to deploy that to azure. OK. With a few steps. So I'm going to keep the same name here. And just to mention, let me show you, I have my, I'm not so, let me see if I can, maybe this one here. No. No. Yes. OK. So yes, you can see here my azure, the azure portal. OK. And I have nothing deployed here because there are no resources, resource groups here. OK. And no application. I have just, I would say, a footprint here concerning the previous deployments before the workshop today because I tested everything, of course. Right. So yes, here is the name for my app. OK. So I can just provide it and confirm. Press enter. I select the cloud region. In my case, West Europe. OK. Again. Right. And then I can select, I would say there are several different frameworks that you can select here, but I'm going to start with custom because it's just a plain vanilla javascript application. OK. And then after that, I have to provide the directory for the source code. It's actually SRC. OK. As you can see here. Right. SRC here. Yes. OK. I confirm again. OK. I'm not going to create, I would say, a binary or something, a package for this deployment, so I can leave the build, the argument for build as an empty one. And then I click enter again and it starts the deployment phase. OK. It creates the static web app. It is now accessing a GitHub. OK. And now the process is going forward. There are a couple of things here. I can close this one here. OK. But if I open, for example, this one here, you will see that actually it is being executed as part of my github actions configuration. OK. It's still running here. Right. And it will be marked with the green check indicator shortly. Let's come back to VS Code. OK. It's running. We can wait a little bit more. I can have a look at my portal as well. OK. You can see that there is a resource group here now for the application. OK. Let's check the status on GitHub again. Let me refresh this page here. OK. Yeah. We'll have a notification here about the application, of course, concerning the ready status. Let's wait a little bit. Cool. OK. It's about to finish. OK. Perfect. Yes, it's done. You can see here now. So I can just click Browse Website. OK. And you will see the application is deployed. OK. So it is as easy as that. OK. It's quite simple indeed. So that's the first one. OK. And you have all the steps here concerning the authentication against GitHub, as I said. Also, you have to select the subscription, provide all the information here. Same thing concerning deployment, cloud Region, as I presented to you. You know the source code directory, the confirmation here, and then the vanilla app. OK. I have also some different resources here for you. Let me show you now. This one, this one, and this one. Yes. OK. So yes, there are some free courses provided by Microsoft Learn. So I'm providing you the links here. That's the first one. You can see many things related to azure Static web apps here, like this one, this one here, this one here, this one here. So feel free, I would say, to explore more. The entire documentation is here for you as well. And we have different, I would say, libraries and frameworks here. We have react, we have angular, we have vue.js, everything. And the last one, this is actually the landing page for the main landing page for this product, azure Static web apps. So you can, I would say, check everything concerning the service itself. And there are additional pointers here. So that's the first one, indeed. So we can start to explore the tutorial now. I'm going to give you some time to complete the steps. And then after that, we'll have the one specific to testing with Playwright. All right, folks, how is it going? Are you still working on it? I'm going to do something here. I'm going to share my screen again and show you the deployment on azure portal, provide you some details. And if you need, of course, I can give you a little bit more time to complete it. And I can do something as well. Perhaps, you know, I'll give you more time to have that completed. But I can start from scratch again, OK, and do it all. So just to make sure that you understand it, right. So let me share my screen now again. Cool. OK, so you can see the azure portal here, for example. And if I check the resource group, you will see the application here. I still have it deployed here. OK, so if I refresh it, you can see that it is still here. You can see the github actions pipeline here, right. With the, I would say, successful completions, right. But let's explore the application here a little bit. We have this resource group, as usual in azure, you know, to group all the resources related to your solution. Then I have the application deployed here, right. If I go to explore it, you will see the application here with all the details, you know, number of requests and so on, some metrics. And of course, the URL is here, you know. Primarily, it is the same one. So if I copy this one here and I hit it with a get request here, you can see, you know, basically the same reply, right. OK, so let me do something now. Let's remove this instance here and the deployment that I have removed the entire resource group. OK, so let's do it. And then I'll close my VS code in the project as well. And then we can restart from scratch. As I said, just to make sure that you understand it, because I would love in case you can complete it. So yes, I closed the folder on VS code. I'm going to remove the resource group now. OK, delete resource group. I provide a name here. Delete. OK. OK, it's running. Let's wait a little bit. And then we can try to access the application. You will see that everything is actually removed now and then we can start from scratch. OK. Meanwhile, please try to complete your steps there, because I understand, you know, you have to install all the dependencies. Perhaps you have different connection speeds and also different variation concerning the bandwidth, you know, depending on from where you are participating from. So yes, I'll consider that. OK, thank you. Right. OK, let's wait a little bit more. Cool, not found. 404. OK. It's still running. Let's wait a little bit more just to make sure that everything is cleaned up. Yeah. OK. OK. OK, let's try that again. OK. OK. OK. OK. I'm going to share my screen again. Cool. Yes. So you can see that now everything is removed. OK. I have these updates here. If I check here, resource groups. OK. So there's no more resource group here. So let's start into it all from scratch, you know, all the steps again. OK, first thing then. OK, we have the prereqs, you know, the dependencies installed. OK, so yes, let's let's create a different repo now. OK, so let me do it. Let me start this here. Let's provide a different name now, maybe. Let's say I have it here. Let's provide let's consider WebApp2. OK, cool. OK, it's here for us. So now I can clone the repo. OK, as the second step here. OK, you can see it is created. So it's time to clone the repo. So let me adjust it. So I have I have this git clone here. Yeah. And remember, you have to provide your own user ID here. OK, so I'm going to modify it. Yes, static WebApp2. OK, yeah. But before I have to create a new directory for this app. OK, so let me do it. Dash two. OK. Yeah, I have it. Let me copy it here. Let me change directories here. OK, we are ready. So now I can clone it again. Perfect. OK. Cool. All right, so now I can actually I have VS Code started here, but there's no folder open. So let's open the one that we've just created. OK. Yeah, this one. Let's wait a little bit just to load the extensions and everything else. OK, it is active activating the extensions here. Yeah, so we are performing this step here. OK, we are opening the project and then we can start to create our WebApp. Let me check if I'm authenticated. I think so. It's still activating the extensions. So let's wait a little bit more. OK, cool. Yes, I'm authenticated. That's important. OK. So please follow the steps here. OK, and make sure that you can authenticate against azure first. OK, I have the project here. OK, yes, it seems. Yes, there are some updates happening here. But anyway, I think we can give it a try. OK, let me hit this one here. Minimize this one, this one. I don't need it. This one as well. Yes, and this and this. OK, so I have it here. So let's try to start. OK, yes, there's a commit step here. Good. Let's do it. OK, so this is just a plain comment. I can hit enter here. Yes, web app 2. That's correct. West Europe. OK, custom. SRC. Again, build is empty, as I explained. OK, let's wait. Hopefully that will work. Cool. Yes, it is. It is going well. Let's wait a little bit more. I can open the GitHub action again. Yes, OK, so you can see it's running here. Let's wait a little bit until it completes. OK I can close this one. This one as well. This one too. OK. Portal is here. If I refresh, possibly I will see. Yes, we can see static web app 2 here. OK, so we provisioned the service. You know, at the end of the day, that's the azure app service. So the azure Static web apps, it provides a kind of high level abstraction on top of it to simplify the experience. OK, still running. OK, we are past this one here. OK, we are waiting for this one. OK. Cool, it's ready. Let's go back to VS Code. OK, browse website. Yes, it worked again. Perfect. OK, so now we'll have lab 2. And lab 2, it's about an introduction to Playwright. OK, Playwright is a testing library for many programming languages like.NET, javascript, Python, Java as well, created by Microsoft. OK, it is an open source framework, a very interesting one. It reuses some, I would say, elements from the library that is actually Jest.io.js, you know, which is, of course, a testing library as well. OK, but it extends it and it has several different, I would say, features like the Playwright Spectre. It's quite useful indeed. So hopefully I'll be able to introduce it to this cool library. OK, and then you can start to use it. Right. OK, so let me switch screens here. Yeah, just to mention, I still have the deployment here. OK, the application again, you will see everything is here. Same thing, the app services here with the Static Web App. Same URL, the new URL here. OK, but we don't need it anymore. OK, so now we are going to explore testing. So there's nothing related to azure at this moment specifically. OK, but just to show you that it's still working, but we can close the portal now. We reach at this point here, as I said, in case you face issues concerning the completion, feel free to contact me on LinkedIn later. You can see or Twitter. You can see my handle here. OK, but that's it. Let's talk testing now. OK, I can close this one as well. OK, so Playwright, as I said, this is a cross-browser automation tool for testing created by Microsoft. It's an open source library and framework, a very cool one. You can, I would say, address the major browsers and the engines. You can see Chromium here, Firefox, WebKit and so on. Multiple languages, as I said, javascript, typescript as well. Interesting to mention Python,.NET and Java. OK, it's good for automation. There are some things here that I'm going to show you quite interesting ones related to automation. Also, you know, you can control, there are several different configuration options, so you can control the way that your test is executed with flexibility, which is a nice thing. OK, you can also record a testing session, you know, and also capture screenshots, create videos and so on. So let's explore it. First thing you have to install it. OK, it's easy. You just install Playwright first. OK, you can see the steps here. Easy one. OK, quick and easy one. Second thing, you install the supported browsers. OK, so there is an additional NPX execution here. You can do everything from the CLI, the command line to interface. You can see the results concerning the installation here. So the second thing now, I can define a test. OK, so you can see here, this is a very simple test. OK, and basically I'm just accessing, I would say, the Playwright homepage. OK, I have it here. Yes, this one. OK, and then I can navigate some elements and check, for example, the content for the title. OK, which is Playwright. OK, so I think I have it open here. Yes, I can close this one. We don't need it anymore. OK. Cool. Yes. So, yes, this is the directory. You can see the structure is quite simple indeed. Let me show you here. This is just a test one, of course. So you create this after installing and everything and restarting it. You can see tests. OK, and I have a configuration file and a simple test here. Basically, the content is the same one that I showed you. You know, I have Playwright here and Playwright. OK, so I can run the first test. OK, which is just npx Playwright test. Let's do it. OK, test is running. Interesting, there is something wrong with my machine, but OK, yes, it passed. OK, so it is as simple as that. Right. But, of course, it's a powerful library as well. OK. So I can I executed it in headless mode. OK, but I can also run it in a headed mode. OK, so let's do it. OK. Yeah, here, here and here. Yes, so we have a browser now. Cool. Yes. OK, yes, completed. Yes, you have a screenshot here and same thing. OK, so now there's a way actually to and I'm providing you several different options here concerning the CLI. OK, so you can explore them later. Right. You can address different sets of tests, you know, you know, change the title, run with a headed browser, you know, as I showed you now and so on. OK, disable parallelization as well. Choose a report or a different one and open playwright inspector. I'm going to show the inspector, you know, the inspector is nice because then you can record the session and then after that you can copy this content here and move it to a file, you know, so you can reuse it. That's quite useful indeed, because actually when you start inspector and the recording, every action is recorded, of course, you know, so it creates everything for you automatically that's quite useful. It's good for your productivity at the end of the day. But let's resume the steps there. Here OK, yeah. Let's see. Yes, let's let's let me show you how to record the session then, you know, that's the next one, by the way. OK, so I can just run NPX playwright code gen. OK, and provide a target URL. Yes, so I have the target here, you know, a browser instance, you can see it in blue here. And then, yes, it is here, you know, so I can hit record and then I can start to navigate and record everything. That's basically it. Yes, what else? Let me see here. Yes. OK, after that, of course, you can copy it to your the script to your preferred code editor like VS Code. As I said, you know, these library actually we use the expect library from the JSIO testing library. OK, I'm sure as a javascript developer, you've heard about it, you know, same one here. So somehow we are not reinventing the wheel, but of course, there are so many extensions and you know, in the encapsulation in terms of complexity. It's all about code reuse, but of course, we are providing you a very good tool as well. That's why we created the project. OK, there are some samples here in terms of your sessions. But if you want to explore all the options, of course, I provided the link here as well for you. OK, so you can explore them all here. Yes, so some examples here, you know, with the wait, for example, page go to expect first, blah, blah, blah. You know, everything is here. Configuration file and options. That's nice, you know, because, for example, you can target all the browsers at once if you want. You know, it's quite powerful indeed. This file is a simple one. So you can just create a playwright dot config dot JS file. I'm going to open it here, perhaps with. Yes, I can use VS code. Let's try. Yes. OK, so you can see the file here, right. So with several different configuration options, you know, workers, number of retries, for example, headless if that's a headless mode or not. You know, you can control the viewport as well. You know, you provide here the target projects. You know, in that case, we are talking about browsers and some other things here. You can see Safari and Chromium here. By the way, this this file is provided here as part of my blog post, you know, concerning this workshop. Yes, you can execute it the same way. Right. In headless or headed mode, config configuring configuring and npm scripts. Same thing. You can also target provide some specific targets here, you know, with the dash dash config option. And that's it. So, yes. And I have the links here concerning the main project that I showed you, but also the api graph, the GitHub, the respective GitHub repository and the YouTube channel. So feel free to explore it. All right, folks. Any questions here or issues? If not, I'm going to draw this session to a close. I'd like to seize the opportunity again to share the open positions that we have with our teams in Microsoft, you know, as presented by Vanya today. I'm posting the links again so you can have a look if you check the chat chat here. And please also visit our channel for this workshop on Discord. OK, you'll have the links there as well.