Getting Started 🚀

Getting Started with fullstackhero's Blazor WebAssembly Boilerplate.

Firstly, make sure that you have already setup your development environment that runs the prerequisite tools and SDKs. Refer Development Environment for details.

To get started with this Boilerplate, here are the avaiable options.

• Fork the Repository. Use this if you want to always keep your version of the Boilerplate up-to date with the latest changes.
• Install using dotnet new . Use this for release versions of the Boilerplate only. Note that this option is currently unavailable for Blazor WASM Boilerplate.

Forking the Repository #

You would probably need to take this approach if you want to keep your source code upto date with the latest changes. To get started based on this repository, you need to get a copy locally. You have three options: fork, clone, or download.

• Make a fork of fullstackhero’s blazor-wasm-boilerplate repository in your Github account.
• Next, since you need to start your private personal project, create your new blazor-wasm-boilerplate personal project by cloning the forked repository on your personal github. This could be done as simple as running git clone https://github.com/{yourgithubuseraccount}/blazor-wasm-boilerplate.git locally on your development machine.
• Setup an upstream remote on your personal project pointing to your forked repository using command git remote add upstream https://github.com/{yourgithubuseraccount}/blazor-wasm-boilerplate and git remote set-url --push upstream DISABLE

Now, whenever there is a new update on fullstackhero’s blazor-wasm-boilerplate repository, you could simply pull in the latest change on your private fork of the fullstackhero’s blazor-wasm-boilerplate repository and later merge these changes with you personal projects.

For step by step instructions, follow this and this.

Installing NuGet Package #

This is by far the easiest and the most streamlined way of getting the latest available Release version of fullstackhero Blazor WebAssembly Boilerplate.

Open up your Command Prompt / Powershell and run the following command to install the solution template.

dotnet new --install FullStackHero.BlazorWebAssembly.Boilerplate

or, if you want to use a specific version of the boilerplate, use

dotnet new --install FullStackHero.BlazorWebAssembly.Boilerplate::0.0.1-rc

This would install the fullstackhero Blazor WebAssembly Boilerplate template globally on your machine. Do note that, at the time of writing this documentation, the latest available version is 0.0.1-rc which is also one of the first stable pre-release version of the package. It is highly likely that there is already a newer version available when you are reading this.

To get the latest version of the package, visit nuget.org

FullStackHero.BlazorWebAssembly.Boilerplate is now in pre-release state. You can find the latest version on NuGet.org

Get the .NET WebApi Boilerplate by running the following command

dotnet new --install FullStackHero.WebAPI.Boilerplate::0.0.6-rc

Creating your First Solution #

Note that this is not valid only if you have installed the NuGet package of this Boilerplate.

Now that you have installed the template locally on your machine, let’s see how you can start generating Blazor Web Assembly Projects.

Simply navigate to a new directory (wherever you want to place your new solution at), and open up Command Prompt at the opened directory.

Run the following command. Note that, in this demonstration I am naming my new solution as FSH.Blazor.

dotnet new fsh-blazor -o FSH.Blazor

Once that is done, your new solution is created for you. As simple as that!

Running the Application #

Firstly, keep in mind that this is a client application that actually consumes data by sending HTTP Requests to the API Server. Thus, you need to make sure that the API is up and running.

To learn about setting up the API Server, refer Getting Started with fullstackhero’s .NET Web API.

Once the Server is up and running, like any other Blazor application, simply navigate to the Host folder under the source folder of the Blazor Project (\src\Host) and run the following standard commands.

• dotnet restore
• dotnet build
• dotnet run

Once the build process is complete, the application would be reachable by accessing https://localhost:5002 on your browser.

By default, the API Server is set to be running on port 5001 of your local machine. If for some port related reason, you have to run the API on another port or so, navigate to src\Client\wwwroot\appsettings.json of the Blazor Project and change the API Base URL Property and set the value to the port that’s exposing the API. This is the default configuration "ApiBaseUrl": "https://localhost:5001/".

Similarly, the Blazor Project by default is set to run on port 5003 of your local machine. Incase you change this to something else, ensure that you have updated the cors.json configuration file on your API project. This makes sure that there is no CORS related issues while the Blazor project tries to access the API Endpoints.