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. 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.
You need to install following prerequisites to create 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 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.
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.
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 file as Calculator.cshtml
and click Add.
Refer to the following screenshot:
Open the Calculator.cshtml
file and put the following code into it:
@page "/calculator" <h1>Basic Calculator Using Blazor</h1> <hr /> <div> <div class="row"> <div class="col-sm-3"> <label class="control-label">First Number</label> </div> <div class="col-sm-4"> <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" /> </div> </div> <br /> <div class="row"> <div class="col-sm-3"> <label class="control-label">Second Number</label> </div> <div class="col-sm-4"> <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" /> </div> </div> <br /> <div class="row"> <div class="col-sm-3"> <label class="control-label">Result</label> </div> <div class="col-sm-4"> <input readonly class="form-control" bind="@finalResult" /> </div> </div> <br /> <div class="row"> <div class="col-md-3"> <button >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 mage below:
This application is still in 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:
You will see a screen similar to below. Select Folder from left menu and provide a folder path. You can provide any folder path where you want to publish your app.
Click on 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 onCreate project
button at the bottom.
Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. One the project is created you cannot change your project id. We will use this project id in 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 loginIt will open a browser window and ask you to login into Firebase. Login using your Google account. Upon successful login navigate back to your CLI.
Step 2: Initializing your application
Execute the following command
firebase initThis command will initialize a firebase project. You will be asked a set of questions. Answer them as shown below:
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:
Open the hosting URL. You can see the application in your browser as shown in the image below:
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.
We learned how to create a sample 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.
Get my book Blazor Quick Start Guide to learn more about Blazor.
Preparing for interviews !!! Read my article on C# Coding Questions For Technical Interviews
You can also find this article at C# Corner
Introduction Blazor is a .NET web framework that allows us to create client-side applications using…
Introduction In this article, we are going to create a sudoku solver with the help…
Introduction In this article, we will learn how to implement Azure serverless with Blazor web…
Introduction Angular is an open-source framework that allows us to create applications for multiple platforms…
Introduction In this article, we will create an optical character recognition (OCR) application using Angular…
Introduction In this article, we will create an optical character recognition (OCR) application using Blazor…
View Comments
index.html file does not exists in c# blazor application. Then how can we deploy project on firebase.
Thanks for another fantastic post. The place else could anyone
get that type of info in such a perfect manner of writing?
I've a presentation subsequent week, and I am on the look
for such information.