Blazor WebAssembly .NET 6 Tutorial | Getting Started | Deploy with Azure Static Web Apps

hello everyone in this video we are going to learn about blazer web assembly this is the first video of a series of videos that i'm planning to do on blazer and this video has three parts first we're going to understand what blazer web assembly assemblies after that we are going to create our first application and finally we are going to add the application that we created to a source control and then we are going to release it with azure static web apps now let's understand what blazer web assembly is blazer verb assembly is a single page application framework just like angular react the importance here is that you can develop front ends with your familiar language c this is much easier if you're already familiar with razer syntax from asp.net even though we can use c-sharp for developing the front-ends we don't need any special libraries or plugins to run this on your browser the c-sharp code that you write will get interpreted into web assembly underneath and web assembly is a another web standard like html and javascript so it works on all browsers and there are two main frameworks blazer web assembly and blazer server in the upcoming videos i am planning to do few videos on blazer server as well but we are going to start with blazer web assembly so what's the difference here as you can see on the left we have blazer web assembly and on the right we have the architecture of blazer server when it comes to blazer web assembly the event handlers for your dom events will get executed right in your browser as you can see we have web assembly in the technology stack but when it comes to blaze server the event handlers for your dom events will be asp.net action methods basically there will be websocket connections established from the front end of your application to the backend so that all the events will be transferred to the backend asp.net core application and the result will be transferred back to the browser to host a blazer web assembly application you just need a static file hosting service like azure static web apps but to host an application that you have written with blazer server you need a backend intelligent web application server like azure app services and we're going to start with blazer web assembly first and we're going to focus on blazer server later and what is blazer how did the term get created it is browser plus razer if you're familiar with razer language this is how it looks basically and blazer is razor syntax on the browser and should you use it in your next project and why should you do it if you're already familiar with dotnet stack and c shop language and that is a plus point and also if you want to develop a enterprise level application with object-oriented organized code if you have a need to reuse the c-sharp libraries that you already written for your back-ends in your front-ends this is an option for you and finally blazer has all the features for developing sp apps as you can see on the screen blazer has all the features that you need for developing a complete single page application it has a component based architecture and routing just like in angular or react this supports data binding form management client server backend communications also dependency injection plus js interrupts as well meaning that you can write javascript code and you can invoke that code with your c-sharp blazer application now that we have completed the first step introduction to blazer let's go ahead and create our first place application i'm in my visual studio the version is 2022 the first thing that we should do is creating a new project you can create the new project using dotnet cli as well and you can use visual studio code to develop your project as well but in this series of videos i will be focusing on visual studio community version in create new project window i can search for webassembly and we have the web assembly template click next let me change the directory and i'm going to call it courses app go next i'm going to go with dot net 6 and then i'm going to create the application and in coming videos i will be focusing on this as well i'm going to create the application now all right as you can see our first project is ready now if we go into courses as you can see here we have a dotnet six application and now if we go into program.cs as you can see we don't have a class and we are going to focus on these one by one later and then we have update razer this is the root level routing component as you can see we have two sections here if blazer could find the route that we are in it will display the actual data and otherwise it will display this message here and then we have a set of global imports and then we have shared razer files and three pages as you can see we have a counter and fetch data and an index and here we have www root as you can see we have a set of images and css files no razer files here because these are just static files you can put your images and css files in www root folder and finally we have launch json file we can specify the launch configurations here we have three configurations courses app iis express and wsl for linux environments and we can see those listed here as well i'm going to select causes app and if you want for example hot reload support you can add it here like this as you can see now let's run this application and see how it works i'm going to go with start without debugging so that hot reloading works for this place app all right as you can see our first blaze app is running now let me hide solution explorer and i'm going into the index.racer file if i do a change here and i'm going to save it now as you can see it is getting hot reloaded in this video we are not going to learn much about raises syntax but in coming videos we are going to learn much more but for this video let me do a change like this i'm going to add a paragraph tag and then i'm going to move it to that let me add a new button as well all right now let me create an event handler for this button for that you can add your backend code like this all right now let me create a variable here it's going to be a private variable and a string i'm going to call it message it's going to be a empty string for now and then i'm going to create a method i'm going to call it clicked and in that method i'm going to update the message and that is going to be this message here i'm going to save it all right now using razer syntax i'm going to invoke this c sharp method here when i click the button for that i'm going to use at sign and on click event on that event i'm going to invoke clicked method like this and then i'm going to display the changed message inside of the paragraph tag all right like this now let me press ctrl s now if i click on this button we are seeing the message and this is our first blazer application now that we have a blazer application let's deploy this to an azure static web app for that i'm going to create a new repository on github let me do that now here i'm going to call it blazer courses app and you will be able to find this repository i will put the link down below this repository will contain everything that we do in the upcoming videos as well it's going to be a public repository as you can see i'm going to create this now it's time for me to add the code to the ripple let me do that now as you can see i have just added the courses app to github the next thing the final thing that i'm going to show you is how to deploy that application using an azure static web app for that i'm going into my azure portal and i'm going to create a new resource and then i'm going to search for static web apps click create we need to specify a resource group i'm going to call my new resource group courses app rg and then name all right hosting plan i'm going to keep this as a free application azure static web apps are not a regional service it is a global service but we can specify a region for azure functions api but for this set of videos i'm not going to use it but anyway i'm going to keep this as central us and here we can configure the deployment details first we need to sign in to my github account let me do that now all right i have signed in now let me set the organization repository and the branch as you can see it's going to be my organization and the repositories blazer courses up and that is what we have created here and then the branch is going to be the main branch the build details we can specify the type of application that we are deploying here since this is a blazer web assembly application i'm going to go with blazer and finally we can specify the app location basically that is the folder of my git repository where my application contains that is courses up let me change that to courses app i don't have any api location and output location i'm going to keep this as it is all right i'm going to create this application all right as you can see the deployment is complete now now if i go into the resource and we have the url for it and the source control and deployment history if you click here you will be redirected to github actions page and here as you can see we have the action running it's complete now i'm going back to azure portal and let's click on this url here as you can see we have deployed our first blaze application to an azure static web app this is the first video of a series of videos that i'm planning to do on blazer place a web assembly and blazer server and i will be covering all these concepts in coming videos if you have any further questions or comments let me know down below and don't forget to like this video and subscribe if you learned something new today and thanks for watching

Channel: Meet Kamal Today - Cloud Mastery

Views: 112

Keywords: blazor webassembly tutorial, blazor webassembly tutorial pdf, blazor, blazor c# webassembly, blazor .net 5, blazor .net 6, blazor tutorial, blazor webassembly, blazor vs angular, blazor vs razor, blazor framework, blazor webassembly vs server, blazor azure static web app

Id: PjcG_9BytlE

Length: 11min 33sec (693 seconds)

Published: Fri Dec 10 2021