Hello everyone, let's talk about Azure Cloud for the web front end developers. Microsoft's global mission is to empower every person and every organization on the planet to achieve more. And the same is absolutely applicable to what Azure cloud brings to web front end developers achieve more with less app my name is Maxim Salnikov. I work as a developer engagement lead at Microsoft Norway and let's stay connected on Twitter webmaxru. I fit mainly about web technologies, web frontend end to be precise, and about cloud technologies. I spent 20 plus years in web development myself. I'm big fan of the developer communities and technical conferences and you'll often find me on the stage, virtual or real, speaking about cloud and web. And also I do lots of training and blogging. Also what I do another side of my personality, I'm a hobby music producer and hobby DJ. Why do I ever talk about this side of my personality here at this technical session? Because this is very connected to the project I want to have as a demo for today. So as DJ and music producer I was missing one particular tool, counter of BPM bits per minute for the audio stream. When for example I produce some music on the fly and I want to mix this with some existing track, I want to have at least rough understanding of how fast this music I produce and it counts in bits per minute in this area. So I couldn't find this tool and I created the one for myself. And this one is purely based on web technology. So it works in any modern browser, on any operating system. There is no back end for core functionality. So it analyzes audio stream right in the browser. This is where I'm super excited by power of current web frontend technologies web APIs and what modern browsers can do. So it captures audio stream, it applies some filters and then it calculates peaks. So this is how we get BPM of the current track. And this is a progressive web application so you can install it if you wish. If you wish you can use it just as a website or you can install it as an application on your device. And of course it works offline because it analyzes everything straight on the particular device. And I even gave a name to this tool. I call this BPM techno created this simple logotype and I'm super happy with its functionality. So I run it on my local machine, localhost 3000. I do some home streaming and producing and I decided actually what's next? What's next for my tool? It works very good for me and no doubt this will work very good for the global dj and music producers community. So I want to share what I created with everyone on our planet who does similar activities like me. Plus I have some extra features on the roadmap. What I want to add to this tool, maybe some simple user account so you can track your stats on what kind of music do you play, how fast is your favorite music. So just these nice additions. At the same time I want to stay focused on what I can do, what I can do very well and what I love to do. This is front end web development. So it's Javascript frameworks, it's HTML CSS and all things around that. So to achieve my goals from this what's next? Statement I definitely need some help from the cloud providers and I decided to create kind of wish list from me as an individual web frontend developer to the cloud provider. And I believe the points I will mention now are very relevant to many, many web frontend developers and teams from small companies, medium companies and for enterprises. Well, the requirements are pretty much the same. What are these requirements? First, hosting itself. No doubts. It should be the fastest, it should be super reliable, it should just work 24/7 then if you talk about global community djs and music producers and consumers of your web frontend application I believe are everywhere on the planet and it makes total sense to have this application, my application, your application, hosted as close as possible to these folks. So we need to propagate this application to multiple servers in multiple countries, multiple continents. And that's really good idea. Then it's not a secret that modern web frontend applications are not simplest these days, right? Many of them are single page applications and now there is a trend to do server site rendering. It requires some extra configuration, some extra possibilities from the web server and it should be supported by my dream hoster company. Next custom domains definitely you want to provide custom domain for your tool. I registered domain for myself. Bpmtech no, in norwegian top level domain zone. This is absolutely a must have and the same must have is serving under HTTPs and it's nice to get free SSL certificate if we talk about deployment. Modern web front end applications are something that you update quite often, right? So many companies have daily deployments or even multiple times per day. This is how modern flow works, right? And I as a web frontend developer would like to spend less efforts on these parts. Maybe later I will learn deeper about DevOps, about deployments, but not now. Now I want to focus myself on web frontend development and also I want to get staging environments for the case before publishing a new version to my, let's say main domain. I want to test it, maybe to apply some end to end testing integration tests or maybe just to show my friends and gather their opinions on this or that new feature. So I want to have this staging environment or test environment, you name it, without any effort from my side. So I want to stay currently as a web frontend developer, not DevOps engineer. At the same time I want to get all these features. Then I told you that I have some simple roadmap for this application. In particular I want to create couple of API endpoints for example for letting people possibility to vote was this detection good or not? Just simple down and I want to gather this data in the database somewhere. And also if we talk about gathering stats for a particular user, we start the discussion from any kind of authentication, right? So providing user account where you can log in and check your stats. I can definitely implement it myself using OpenID, connect and other authentication mechanics. But if I can get help from hoster from the cloud, this is always better, right? Like less efforts needed to implement at least authentication flow. I don't want to create this login screen, reset, password screen, et cetera and all code, all the logic behind it. I'm completely fine with authentication via third party providers, for example GitHub or Twitter or something like this. And after all, if we talk about testing API endpoints and especially testing authentication, it's sometimes quite challenging to recreate the environment on my local machine. But I want to develop, I want to build my application at home using my local machine, maybe even without Internet connection. So I need some tools to help me with mimicking this environment if we talk about some extra features. Last but not least, I myself talk about my hobby project. So I invest some spare time into this. I invest some evenings to build this tool, but I don't want to invest dollars, right? At least now I don't have any plans to commercialize this and do. I don't want to spend too much money on that project. So I registered domain and maybe this is my only investment so far. That means I need a good free tier from the cloud provider for my web frontend application. And you know folks, such cloud provider exists. It's delivered by Azure cloud and called static web apps. I'm proud to take some part in building this service for web frontend developers so I provided my feedback. I took part in architecting some of the pieces of this service so I started with this service. I am super happy with what it brings to me as to web frontend developer and I definitely want to share my knowledge with you. So you can start and you can use all the benefits of Azure static web app. Okay, how to start? That's very simple, multiple options. But I decided to list two of them on this slide. Maybe the simplest one for you to install extension for vs code. Of course, if you use vs code as your main code editor, many developers do so install the extension called Azure Static web app. You will find this super easily open your web frontend project. Maybe it's created using react or angular or vue swelter, whatever your own framework without framework at all. Just open this folder and click plus button. Create static web app and then you'll follow some mini wizards to complete the steps. And the same flow is when you use Azure portal to achieve the same. So you just create new resource called Azure static web apps. So what questions you will answer before the flow will be completed. First, it all starts with source code repo. Well it's not a secret that I believe, I hope that vast majority of developers, any kind of developers, store their code not just as a file on their machines, but as a source in kind of source code repository. Maybe git is the mainstream. So if you have your code hosted, for example on GitHub you are good to go. So you point to this code repository, then you confirm a few points of the configuration about your application where your frontend code is resizing. Is it a root folder of the repo or maybe some subfolder? If you for example use mono repo approach then you point to build artifacts folder where the resulting set of resources after you build your web frontend application is located. For example for react this is folder called build. And then you count three, two, one, maybe a bit longer. If you have quite complex build flow and automatically your application is online, you will immediately receive test hostname, test domain name, couple of random words, Azure staticapps. Net something like this. So good to start with. Of course then you can connect your custom domain and yeah, your application is distributed over multiple data centers, multiple locations, multiple continents. Isn't that cool? So it was the start flow. Now how to deploy a new version, right? So you created this Azure static web apps resource and immediately you found for example bug in your application and you want to deploy a new version. Which steps do you need to go from building your code to having the new version deployed globally? First step code like fix your bug or add new feature and push it to your source code repository. That's it. And you know folks, there is no step number two, this is only thing you need to do. Basically no extra movements except your regular development flow, right? So you create a new code, you push it to the repo, then Azure static web apps together with GitHub actions where your source code is located will take care of the rest. Of course, under the hood many things are happening for you after you merged your code to your main branch or the branch you specified as the branch to monitor when you created Azure static web apps resource. Well, GitHub is taking control if we talk about your repo hosted on GitHub. Of course, maybe you heard that GitHub has awesome CI CD tools called GitHub actions. So this is where all the magic happens on recreating environments for your application, installation of modules from NPM and after all the build itself, by default it's just NPm run build. Or you can provide your custom comment. If you use some different comment then GitHub actions has the set of build artifacts. Well for many front end web applications this will be something like index HTML, main javascript bundle, main CSS bundle and yeah, it just copies this over multiple data centers. And if you are using not GitHub but Azure services for storing your source code, that's also absolutely possible to set up same flow for Azure repos and Azure pipelines. What will it take from you to develop your application locally? Well, we have also helper for this, also called Azure static web apps CLI command line interface this is optional, but I strongly recommend you to use this tool just to recreate complete environment like we have on the cloud, but on your local machine. This will help you a lot in emulating all API endpoints, all things around authentication. And after all this is just a nice static web server for you to help to debug and test your web frontend application. So how to start with Azure static web app Cli? Well classic, you just go and install corresponding package. I strongly recommend you to install it globally and then you will have SWA command available for you where you provide a few parameters to configure this comment for your particular application. Of course every frontend application is different, right? Has its own settings, but if we talk about very generic react application created by CRA create React app library, the comment will look something like that. Swa start and then you point to your dev server and then point to comment which you use to start the application and API folder. So this one single comment starts pretty much everything on your local machine. Now demo time, let's have a quick demo of the application I mentioned and I built myself called BPM techno which counts BPM. So let me open this online. It's located at bpmtech ino. Please feel free to use this application. It's in production and it just works. So I will start listening. So now it listens microphone on my machine via the browser and you see the spectrum analyzer is working and it tries to calculate Bpm of my narrative which has no sense of course, but if we clap, you see there are quite visible peaks and I even have sample demo file with a track I created. Let's listen this and let's make sure that BPM was detected correctly. Volume up frontend yes, after some stabilization it displays 120. Now it measures my voice again and this was correct. Bpm. This is BPM I created this track with and I can give thumbs up and this triggers API endpoint I have as a part of this application. Code wise this is classic react application and to make it working with azure static web apps we just need to provide build command. So you see this on your screen now build and no exotic, just a react application plus service worker to make it working offline. Also I want to show you this file which was created automatically right after I connected this resource to static web app service. This is workflow file for GitHub actions. So this file will appear on your GitHub account in your source code repository after you did this configuration. And there is no need to learn what's going on here, at least for the beginning. I mean you don't have to explore all the details of this file. This is what GitHub actions will do on every push to the source code repo and it basically builds your application and you can fine tune some parameters here if you wish, if needed, if you want to customize this flow. Yeah, so it was created automatically for you to save some time. I will not go through all the details about my application and the features it uses from Azure static web apps functionality. Please feel free to explore this GitHub repo. I will give you a link in just a few seconds. It contains pretty much end to end journey from how to build your Azure static web app or how to create this resource out of your web frontend project to all more or lets core functions, staging environments, authentication functions in form of API endpoints I have here. So you'll find all the explanations on this GitHub repo. Now I'll go back to my slides because I want to explain one last thing, how to continue learning about this interesting service. Well, we have awesome resource called Microsoft. Learn where you will find guides from scratch, from zero to hero, how to complete this or that task using Azure static web app. Of course, we have very well written documentation on every single piece of functionality of Azure static web app, every single method. And this is a link to my demo itself. Please feel free to use it, to fork it, to edit it, to send some issues to me. Yeah, do whatever you want. This is open source and a reminder that it includes includes really detailed demo of all Azure static web apps functions. That's pretty much it from my side. Let's stay connected on LinkedIn and Twitter. And thank you very much. Maxim Salnikov was with.