A real-world demo and a playground for Azure Static Web Apps service.
Static Web Apps demo – CI/CD, Deployment and Test Pipeline on Azure
AI Generated Video Summary
This workshop provides insights into engineering at Microsoft, highlighting the company's culture of curiosity, learning, and customer focus. It discusses the use of hackathons to generate ideas and overcome challenges in building large-scale products. The workshop also covers technical resources and tutorials on Azure Static Web Apps and Playwright testing framework. It emphasizes the flexibility and powerful features of Playwright for testing and code reuse. The session concludes with information about open positions at Microsoft.
1. Introduction to Engineering at Microsoft
I'm an engineering manager at Microsoft Ireland, and I'll be sharing my personal view and experience on engineering at Microsoft. Microsoft has a long history of building products adopted worldwide. We work on products that make a difference for thousands of organizations and people. Our culture encourages curiosity, learning, and taking risks. We prioritize understanding our customers' needs and embrace diversity and inclusion. We believe everyone should be a leader and contribute to our culture and product development. Our yearly hackathon events promote a growth mindset.
Hello, everybody. Please allow me to introduce myself. My name is Vanya Lebedev and I'm an engineering manager with the Dynamics 365 supply chain manager team at Microsoft Ireland. I have been working at Microsoft for over 12 years, first as a software engineer, and then as a manager, and I'm 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 this 12 years. I will talk about the engineering challenges that my team is currently solving and about the engineering opportunities in the team. So I hope you will 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. 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, Satchin Adella, 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 a 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 on the team, and everyone brings a unique perspective.
There were so many examples in my career where their opinions and ideas helped us to produce better software and products, and ultimately succeed. This is something that I think is very unique and very inspiring about my work. This is why I keep going. Another thing that really stands out to me about 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 org 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 great, healthy, efficient engineering organisation, so this is something I really like.
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 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. Yep.
2. Hackathons and Engineering Challenges
Hackathons have been an amazing experience for me, generating great ideas and fostering a strong team dynamic. Our team focuses on supply chain management applications for enterprises, covering various areas such as sales, procurement, manufacturing, and more. Building such a large-scale product requires a team of thousands of engineers. We face challenges in performance, scalability, integration, and user experience. Fortunately, we leverage the Microsoft Cloud and cutting-edge technology like Power Apps and microservice architecture to overcome these challenges.
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. Again, it was a lot of words and 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 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. Naturally, 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-mid-size 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 an easy and efficient experience. And, of course, the 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...
3. Azure Developer Engagement Lead and Labs
My name is Juarez Barbosa, Jr. I am the Azure developer engagement lead in Microsoft. Here you can see my contact details, you know, my media 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.
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 HackaMS 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 Venya with a presentation about software engineering at Microsoft. Then we'll have a quick demo now. I'm gonna, I would say, perform all the steps concerning the couple of labs that we have today. I'm gonna start now with the one related to Azure Static Web Apps, OK? Including continuous integration and delivery. Also build, 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 JST, JS, the testing library, you know. But there are some extensions, so we are going to talk about that shortly. So, without further ado, let's start, OK? So, yes, I have my VS Code open here. Let me show you the first lab, and I'm gonna share that on the IAM window so you can have a look as well, OK? 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, OK?
This is the tutorial about Azure Static Web Apps. Actually, a blog post. I summarized all the steps, you know, so you don't have to go through all the extensive documentation that we have. The first thing here, we have some prereqs, OK? 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'll have, I would say, plenty of time to address the prereqs as well, OK? We'll need 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 your preferred one. It's easy to adapt it. There is nothing specific to the VS Code here apart from the extension. Also, Git, of course, OK? So, the first step here is to create a Git repo, OK? So, 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. Sorry. OK, so this is the REPL, OK, actually the GitHub Action, but you can see the REPL 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 REPL, OK, for the SWA application. We'll have the REPL 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 REPL, of course, locally. OK, so remember to replace your GitHub account name here. OK, and I have mine here. OK, so I started CMD, and then I would say navigate to the right directory, and then I can clone the REPL story. I have it here open for you, and you can see the same source code here with the pop-up files, right? Hello, you have stopped sharing your screen. Oh, sorry.
4. Creating a Static Web App
I talked about the remote REPL and creating a static web app. You need to authenticate against Azure, select the SWA section, provide a name for the app, select the cloud region, choose the custom framework, provide the source code directory, and start the deployment phase.
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 REPL, 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 REPL, 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?
5. Deploying the Application and Additional Resources
There are a couple of things here. If I open this one, you will see that it is being executed as part of my GitHub actions configuration. Let's come back to VS Code. You can see that there is a resource group here now for the application. It's quite simple, indeed. You have all the steps here concerning the authentication against GitHub, selecting subscription, providing information, deployment cloud region, source code directory, and the vanilla app. There are some free courses provided by Microsoft Learn, and we have different libraries and frameworks. This is the landing page for Azure static web apps.
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? 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. Okay. 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 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, you know, 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. You know this one here, this one here, this one here you know so feel free to I would say to explore more the entire documentation is here for you as well. You know, and we have different, I would say, libraries and frameworks here. You know, we have react. We have angular we have view JS. Everything. And the last one. This is actually the landing page for delay the main landing page for this product you know Azure static web apps so you can I would say check concerning check everything concerning the service itself. OK, and there are additional pointers here. So, um, that's the first the first one, indeed, so we can start to explore the the the tutorial now.
6. Testing with Playwright and Resource Cleanup
I'm going to give you some time to complete the steps, OK? And then after that, we'll have the one specific to testing with Playwright. Let's explore the application here a little bit. We have this resource group, as usual in Azure, to group all the resources related to your solution. Then I have the application deployed here. Let's remove this instance here and the deployment that I have removed the entire resource group. Let's wait a little bit more just to make sure that everything is cleaned up.
I'm going to give you some time to complete the steps, OK? 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? Um, I'm going to do something here. I'm going to share my screen again and show you the deployment on the Azure portal, providing some details, you know. 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. Okay, and do it all. So just to make sure that you understand it. Right. So, let me share my screen now again. Cool. Okay, 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. Okay, 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. 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 without any 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 cat request here, you can see, you know, basically the same reply, right. Um, okay, so let me do something now. Let's remove this instance here and the deployment that I have removed the entire resource group. Okay, so let's do it. And then I'll close my VS Code and 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 close the folder on VS Code. I'm going to remove the resource group now. Okay, delete resource group. I provide a name here. Delete. Okay. Okay, 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. Okay. Meanwhile, please try to complete your steps there, because I understand you have to install all the dependencies. Perhaps you have different connection speeds and also different variation concerning the bandwidth, depending on where you are participating from. So yes, I'll consider that. Okay. Thank you. Right. Okay, let's wait a little bit more. Cool, not found. 404. Okay. It's still running. Let's wait a little bit more just to make sure that everything is cleaned up. Yep. Okay. Okay. Okay. Okay.
7. Creating a New Repo and Cloning
Let's go through the steps again. Create a different repo with a new name. Clone the repo and provide your own user ID. Create a new directory for the app. Open the project in VS Code and ensure authentication against Azure.
So let's talk into it at all from scratch you know all the steps again. Okay, first thing then.
Okay, we have the pre reqs, you know the dependencies installed. Okay, so yes let's let's create a different repo now. Okay, so let me do it. Let me start this here. Let's provide a different name now, maybe. Okay I have it here. Let's let's provide. Let's consider web app to, okay. Cool. Okay, it's here for us. So now I can clone the rebel. Okay, as the second step here. Okay, you can see, it is created, so it's time to clone the rebel. So let 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. Okay, so I'm going to modify it. Yes, static web app to. Okay, yeah. Before I have to create a new directory for this app. Okay, so let me do it. Dash two. Okay, yeah, I have it. Let me copy it here. Let me change directories here. Okay, we are ready. So now I can clone it again. Perfect.
Alright, so now I can actually I have VS code started here, but there's no full done folder open. So let's open the one that we've just created. Okay. Everything is on. Let's wait a little bit just to load the extensions and everything else. Okay, it is active activating the extensions here. Yeah, so we are performing this step here, okay? We are opening the project and then we can start to create our web app. 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. If you're not, please follow the steps here. OK. And make sure that you can authenticate against Azure first. OK.
8. Deploying the Project
I have the project here. Let's try to start. There's a commit step. Web app 2. West Europe. Custom. SRC. Let's wait. It is going well. GitHub action is running. Let's wait until it completes. Static Web App 2 is provisioned. Azure app service.
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. 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. So we provisioned the service. At the end of the day, that's the Azure app service.
9. Introduction to Playwright Testing
10. Exploring Playwright Testing
You can record a testing session, capture screenshots, create videos, and more. To get started, install Playwright and use all the supported browsers. Define a simple test by accessing the Playwright homepage, navigating elements, and checking the title content. The directory structure is straightforward, with a configuration file and a test. Run the test with NPX playwright test.
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 use all 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. 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 you start in 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 play right here and play right. 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. OK. Yes, it passed. OK. So it is as simple as that. Right.
11. Recording Sessions and Code Generation
Playwright provides powerful features like running in headless or headed mode, taking screenshots, and offering various options through the CLI. The inspector allows you to record sessions and automatically generates code for reuse. Let's resume the steps and learn how to record a session with NPX playwright code jam and a target URL.
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. Yeah. 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 you're concerning the CLI. So you can explore them later. Right. You can address different sets of tests. You know, you 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 in 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. It that's quite useful indeed, because actually when we 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 they're here. OK. Yeah. Let's. Yes, let's let's let me show you how to record the session, Dan. You know, that's the next one, by the way. OK, so I can choose from an NPX play right code jam. 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.
12. Maximizing Efficiency with Playwright and Jest
You can record and navigate the session, copy the script to your code editor, and explore the configuration file and options. The Playwright testing library offers powerful features for testing and code reuse. You can target multiple browsers at once and configure various options. The configuration file provides flexibility in setting parameters such as workers, retries, and headless mode. You can execute the file in different modes and target specific projects. Additionally, there are links to the main project, API, GitHub repository, and YouTube channel. If there are no further questions, the session will be concluded, and the open positions at Microsoft will be shared again.