Create an application in Visual Studio - Blazor Tutorial

- [Instructor] It's time now to create our Blazor WebAssembly application in Visual Studio. First, I'm going to create the application in Visual Studio, going through the different configuration options that are available. Once the application has been created, I will run the application and navigate around it. In addition, I will show you how to create the application using the .NET command-line interface or CLI. With Visual Studio 2022 opened up, let's go ahead and create a new project. Let's do a search for Blazor WebAssembly. Once I've selected it, I'll click on Next. Time to give it a project name. I will name it MyBlazorProject. And click Next. Here I have a number of different options. I have the framework that it runs from. I'm going to use .NET 6.0 long term support. Then I have the authentication type. This would be applicable if users need authorization to access certain parts of the application. For now, I will leave this as None. I wish to configure it for HTTPS, so the web application runs under SSL certificate. I will leave this ticked. ASP.NET Core hosted is where we want to include service side support for our application, such as integrating a database. Progressive Web Application is where you can allow the user to install the web application onto their machine. This is great if you want your application to be supported for offline use. The final option is Do not use top level statements. In .NET 6, the console app template change significantly in the move that is designed to simplify the code. You can now create the Program dot cs class without a namespace, class or main method. Tick this option would add these into the file. I will leave these options unticked. Let's go ahead and create the application. With our app created, let's have a look at what Visual Studio has created. The wwwroot folder contains my CSS images and some sample data in a JSON file. It also contains the main HTML template for the application. Next, we'll look in the Pages folder. These are creative Razor components. And routing is triggered using the app page directive. Now let's have a look at the Shared folder. And these are common Razor components that are shared in different parts of the web application. This is good for code reuse. Then we have the underscore Imports dot razor file. If I was use similar namespaces across the application, I could store them in this file. The App dot razor file focuses on what layout to use to render the application. It also gives me the option to display a different looking page if a page cannot found. Finally, I have the Program dot cs file that configures our application and allows it to be run. As we are using top level statements, there is no namespace, class or main method declared. Let's go ahead and run the application. With the application running, I can see that we have a very basic application. On the homepage. there is a Hello, world example welcoming to our new app. If I click on the Counter link, I have the option to click the button. Every time I click the button, the current count gets incremented by one. Finally, I have to Fetch data page. If I go back into the application and go into the wwwroot folder and sample data folders and go to the web dot json file, it is using the JSON data from this file to populate the data on the page. You may notice one significant difference to traditional web applications. When you click between pages, the UI updates without a refresh. This is one significant difference from traditional web applications and one of the great benefits for Blazor and single page applications in general. If you're not used to Visual Studio, you may wish to use the .NET CLI to create your application. You could do that by running this command-line, dotnet new blazorwasm, hyphen o. And then the project name we're going to call it MyBlazorProjectCLI. Looking in the folder explorer, I can see that is created the same files as Visual Studio. I can run the application in the command prompt by running CD MyBlazorProjectCLI and then running dotnet run. The app is running on localhost code on 7224. If I put that address into the browser, I can see that the app is running.