How to build, extend and deploy Balzor applications (Server & Web Assembly) composed by DevUp platform

How to build, extend and deploy Balzor applications (Server & Web Assembly) composed by?DevUp?platform

What is?Blazor?

• ?Blazor?is a framework for building web applications using C# and .NET. It allows developers to create client-side web applications using C#, instead of JavaScript.?Blazor?uses?Web Assembly, a web standard that allows code written in languages like C# to run in web browsers, to execute C# code directly in the browser.
• ?Blazor?offers two different hosting models:

1. Blazor?Web Assembly: runs client-side on the web browser using Web Assembly. It allows you to run C# code directly on the browser, with no need for a server.
2. Blazor?Server: runs server-side and uses?SignalR?to handle communication between the client and the server. It allows you to run C# code on the server and handle user interactions on the client side using JavaScript.

• Blazor?allows developers to reuse their C# code, skills, and libraries, reducing the need to learn JavaScript, and share code across the client and the server. It also allows developers to take advantage of the performance and security features of .NET.
• It's worth noting that?Blazor?is still relatively?new?and is still considered experimental, so it may not be suitable for all types of projects.

How to build a?blazor?application composed by DevUp using Visual Studio 2022?

Open Visual Studio 2022 and select "Open a project or solution" from the start page.

Navigate to the folder where the solution file (.sln) is located.

Select the solution file and click "Open".

Once the solution is open, you can view and edit the project files, build the application, and run it in a web browser by clicking on the "Debug" button or "Start Without Debugging" button.

Alternatively, you can open the existing?Blazor?application solution from command line by navigating to the folder where the solution file is located and then run the command?devenv?/solution:<solution name>.sln

Also, if you have multiple version of Visual Studio installed on your machine, it's possible to specify the version you want to open the solution with, by using the?devenv?command and specifying the version number. For example,?devenv?/solution:<solution name>.sln?/version:15.0

Note: Please make sure that your solution is compatible with the version of Visual Studio you are using before opening it.

How to add a new?Blazor?component in existing application composed by DevUp platform?

• Open the existing?Blazor?application in Visual Studio 2022.
• Right-click on the project in the Solution Explorer and select "Add" > "New Item".
• In the "Add New Item" dialog, select "Blazor" in the left-hand menu, then select "Blazor?Component" in the middle of the screen.
• ?Give the component a name and click "Add". This will add the new component to the project and open the component file for editing.
• You can add the component to your application by adding a <component> tag with the component name to a Razor view or Razor page.
• You can also add the component dynamically to the page using a C# code by invoking the component using the?RenderComponentAsync?method.
• ?You also need to create/use a model in your model folder, This class contains the DTO that?blazor?application will get/send to API.
• ?You also need to create/use the API Client class, this class acts as a proxy to all API actions, make it simple to invoke API from?balzor?components
• Once you've added the component, model and API client to your application, you can start building it by adding new elements, data binding, and logic to the component.
• ?Build and run the application by clicking on the "Debug" button or "Start Without Debugging" button.
• ?Also, you can use the command line to create new?Blazor?component by using dotnet new?blazorcomponent?-n <ComponentName> command.

How to deploy a?blazor?application to IIS?

• Build the?Blazor?application: Use the Visual Studio Build menu or the dotnet command-line tool to build the application in Release mode. This will create a set of files in the bin/Release or bin/Debug directory that can be deployed to IIS.
• Install the .NET Core Hosting Bundle: Install the .NET Core Hosting Bundle on the server where you want to deploy the application. This bundle includes the .NET Core runtime and the ASP.NET Core Module, which is required to run?Blazor?applications on IIS.
• Create a new website in IIS: Open the IIS Manager and create a new website for the?Blazor?application. Give the website a name and specify the physical path to the application's build output directory.
• Configure the application pool: Set the application pool to use the .NET Core version that is compatible with the version of?Blazor?you are using.
• Add the?Blazor?application to the website: Add the?Blazor?application to the website by clicking on the "Add Application" button in the IIS Manager.
• ?Configure the?web.config?file: By default, the?web.config?file that is created by Visual Studio includes settings that are appropriate for running the application on the development server. You may need to update the?web.config?file to include the settings that are required for running the application on IIS.
• Start the website: Once the website is configured, you can start it by clicking on the "Start" button in the IIS Manager.

DevUp dashboard presents real-time statistics of how much energy and effort are saved by code compositions with DevUp Platfom.

Let’s DevUp our applications to save our time, budget and environment.