Deploying A Blazor Application On Firebase

In this article, we will learn how to deploy a Blazor application on Firebase. We will create a client-side application using Blazor and host it on Firebase.

Introduction

 
For the demonstration of the process, we will create a basic calculator app using Blazor and host it on Firebase. This application will not have any server-side code or Web API logic. We will use Visual Studio 2017 to build and publish the application and will use CLI to deploy the application on Firebase.
 
Prerequisites 
 
You need to install the following prerequisites to create a Blazor application.
  • Install the .NET Core 2.1 or above SDK from here
  • Install the latest version of Visual Studio 2017 from here
  • Install ASP.NET Core Blazor Language Services extension from here

Creating a Blazor application

We will create a basic calculator application for this demo. Since this is a basic calculator, it will take two operands, and supports four arithmetic functions—addition, subtraction, multiplication, and division.

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as SampleCalculator and press OK.
 
Deploying A Blazor Application On Firebase
 
After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select “Blazor” template and press OK.
 
This will create your Blazor application. We will now create our calculator component.
 

Creating the Calculator Component 

For this application, we will use the single page component structure. The logic and the UI will be in the same file.

To create our component, right-click on SampleCalculator/Pages folder and then select Add >> New Item. An "Add New Item" dialog box will open, asking you to select the desired item template from the provided list of items. Select ASP.NET Core from the left panel, and then select Razor View from the templates panel. Put the name of the file as Calculator.cshtml and click "Add".
 
Refer to the following screenshot.
 
Deploying A Blazor Application On Firebase
 
Open the Calculator.cshtml file and put the following code into it.
  1. @page "/calculator"  
  2.   
  3. <h1>Basic Calculator Using Blazor</h1>  
  4. <hr />  
  5. <div>  
  6.     <div class="row">  
  7.         <div class="col-sm-3">  
  8.             <label class="control-label">First Number</label>  
  9.         </div>  
  10.         <div class="col-sm-4">  
  11.             <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />  
  12.         </div>  
  13.     </div>  
  14.     <br />  
  15.     <div class="row">  
  16.         <div class="col-sm-3">  
  17.             <label class="control-label">Second Number</label>  
  18.         </div>  
  19.         <div class="col-sm-4">  
  20.             <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />  
  21.         </div>  
  22.     </div>  
  23.     <br />  
  24.     <div class="row">  
  25.         <div class="col-sm-3">  
  26.             <label class="control-label">Result</label>  
  27.         </div>  
  28.         <div class="col-sm-4">  
  29.             <input readonly class="form-control" bind="@finalResult" />  
  30.         </div>  
  31.     </div>  
  32.     <br />  
  33.     <div class="row">  
  34.         <div class="col-md-3">  
  35.             <button onclick="@AddNumbers" class="btn btn-primary">  
  36.                 Add  
  37.                 (+)  
  38.             </button>  
  39.         </div>  
  40.         <div class="col-md-3">  
  41.             <button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (−)</button>  
  42.         </div>  
  43.         <div class="col-md-3">  
  44.             <button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>  
  45.         </div>  
  46.         <div class="col-md-3">  
  47.             <button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>  
  48.         </div>  
  49.     </div>  
  50. </div>  
  51.   
  52. @functions {  
  53. double operand1 { getset; }  
  54. double operand2 { getset; }  
  55. string finalResult { getset; }  
  56. void AddNumbers()  
  57. {  
  58.     finalResult = (operand1 + operand2).ToString();  
  59. }  
  60. void SubtractNumbers()  
  61. {  
  62.     finalResult = (operand1 - operand2).ToString();  
  63. }  
  64. void MultiplyNumbers()  
  65. {  
  66.     finalResult = (operand1 * operand2).ToString();  
  67. }  
  68. void DivideNumbers()  
  69. {  
  70.     if (operand2 != 0)  
  71.     {  
  72.         finalResult = (operand1 / operand2).ToString();  
  73.     }  
  74.     else  
  75.     {  
  76.         finalResult = "Cannot Divide by Zero";  
  77.     }  
  78. }  
  79. }  

In the HTML part of the code, we have defined two textboxes to read the operand input from the user, and a textbox to display the result of arithmetic operations. We have also defined four buttons, one for each arithmetic operation. The onclick event of the buttons will invoke the methods that will provide the output, once it has performed the corresponding operation on both operands.

In the @functions section, we have defined two properties to bind to the user input value, and another property to display the calculation result. To handle our arithmetic operations, we have defined four methods that will perform the desired operations on the operands, and set the value of finalResult that will then bind to the Result field on the UI.

Add the navigation link for this component in Shared/NavMenu.cshtml file. Press F5 to run the application and you can see the output screen as shown in the image below.

Deploying A Blazor Application On Firebase
 
This application is still in the development environment. Before hosting it on Firebase, we need to publish it.
 

Publishing the Blazor application 

 
Right click on the project and click "Publish". Refer to the image below.
 
Deploying A Blazor Application On Firebase 

You will see a screen similar to below. Select Folder from the left menu and provide a folder path. You can provide any folder path where you want to publish your app.

Deploying A Blazor Application On Firebase 

Click "Publish". Visual Studio will start publishing your application. If there are no build errors, then your application will be published successfully to the folder you have mentioned.

After the publishing is successful, we will proceed to host this application on Firebase.
 

Adding Project on Firebase 

The first step to host any application on Firebase is to add a new project on Firebase console.

Navigate to https://console.firebase.google.com and sign in with your Google account. Click on “Add Project” link. A pop-up window will open, as shown in the image below. Provide your project name and click on “Create project” button at the bottom.
 
Deploying A Blazor Application On Firebase
 
Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. Once the project is created, you cannot change your project id. We will use this project id in the next section while initializing our application.
 

Deploying with Firebase 

 
Open the folder where you have published your Blazor application. Here you can see a folder “SampleCalculator” and a web.config file. Inside “SampleCalculator”, we will have another folder with name “dist”. We will publish the contents from this “dist” folder.
 
Open a command prompt/PowerShell window inside the “SampleCalculator” folder. Now, follow the steps mentioned below.
 
Step 1 - Login using Firebase
 
Execute the following command.
 
firebase login 
 
It will open a browser window and ask you to log into Firebase. Log in using your Google account. Upon successful login, navigate back to your CLI.
 
Step 2 - Initializing you application
 
Execute the following command.
 
firebase init
 
This command will initialize a Firebase project. You will be asked a set of questions. Answer them as shown below.
  • Are you ready to proceed? – Press Y
  • Which Firebase CLI features do you want to set up for this folder? – select Hosting
  • Select a default Firebase project for this directory: - If the project you added in the last section appears in the list, select it, else select “don’t set up a default project”.
  • What do you want to use as your public directory? – dist
  • Configure as a single-page app (rewrite all URLs to /index.html)? – y
  • File dist/index.html already exists. Overwrite? – N
You will get a “Firebase initialization complete!” message.
 
Step 3 - Adding a default project
 
If you already selected a default project in step 2 then you can skip this step. If you have not selected a default project then you need to add it manually here. Run the following command,
 
firebase use --add yourProjectId
 
In this case, it will be,
 
firebase use --add blazorcalc
 
You will get a success message as “Now using project blazorcalc”.
 
Step 4: Deploy on Firebase
 
Finally, run the following command to deploy your application on Firebase.
 
firebase deploy
 
This command will deploy your Blazor application on Firebase and upon success, it will give you a hosting URL.
 
All the steps mentioned above is shown in the GIF below.
 
Deploying A Blazor Application On Firebase 
 
Execution Demo 
 
Open the hosting URL. You can see the application in your browser, as shown in the image below.
 
Deploying A Blazor Application On Firebase
 
Article Extension 
 
We can follow the same steps to host an Angular application on Firebase. Run the following command to build an Angular app for hosting.
 
ng build --prod
 
It will create the “dist” folder in your application’s root folder. Once you get the “dist” folder follow the same steps as mentioned above.
 

Conclusion 

 
We learned how to create a simple calculator application using Blazor. We also learned how to deploy this application to Firebase. You can find the code for this sample calculator application at GitHub. You can read my other articles on my blog here

See Also