How to Install BF6 for Blazor WebAssembly

Blazor Foundation 6, which is the topic of this tutorial, is a front-end framework that helps you build mobile-first responsive websites and native apps more quickly and easily.

Just like any other framework, there are plenty of methods available for installing the Blazor Foundation 6 framework. Below is a simple methods that will give you a clear idea on how to install Blazor Foundation 6 framework for Blazor WebAssembly.

We are going to assume here that you know and have created a Blazor WebAssembly project using Visual Studio IDE.

Install from NuGet Package.

Navigate to Project > Manage NuGet Packages

Search for OpenCodeDev.Blazor.Foundation

Then Install the Latest version.

Setup index.html

Open up /wwwroot/index.html

If the project is a new project you’ll probably have the demo project and you’ll have to remove reference like bootstraps.

The final document should look like this:

<!-- HEADER -->

<!-- Compiled CSS of Zurb Foundation 6 also available foundation.min.css -->
<link href="/_content/OpenCodeDev.Blazor.Foundation/css/foundation.css" rel="stylesheet" />
<!-- Contain Overrides and Addons to Foundation Elements and Also Extras from Blazor Foundation 6.-->
<link href="/_content/OpenCodeDev.Blazor.Foundation/css/blazor.foundation.css" rel="stylesheet" />

<!-- Required for MDI Icons -->
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet" />

<!-- ... BODY ... -->

<!-- Footer After blazor.webassembly.js -->
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/jquery.js"></script>
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/foundation.js"></script>
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/blazor-foundation.js"></script>

Setup Program.cs

Pretty straight forward

using OpenCodeDev.Blazor.Foundation;

public static async Task Main(string[] args)
{
  var builder = WebAssemblyHostBuilder.CreateDefault(args);
  builder.RootComponents.Add<App>("app");

  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
  // Add this line.
  builder.Services.AddAllBFPlugins();
  await builder.Build().RunAsync();
}

Setup _Imports.razor

Good to add these usings for quick access to the components.

@using OpenCodeDev.Blazor.Foundation.Components.Controls;
@using OpenCodeDev.Blazor.Foundation.Components.Containers;
@using OpenCodeDev.Blazor.Foundation.Components.General;
@using OpenCodeDev.Blazor.Foundation.Components.Navigation;
@using OpenCodeDev.Blazor.Foundation.Components.Media;
@using OpenCodeDev.Blazor.Foundation.Components.Typography;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.Reveal;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.InfiniteScrollHelper;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.MotionUI;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.StyleManager;

You’re all set to start build your WebAssembly app.

Max Samson

Max Samson was born and raised in Canada. He has several years of experience in various coding languages like C#, JS, VB, PHP and Node to name a few. In recent years, he's been focused to specialize in the next tech stack like Blazor WebAssembly, Blazor Native and Blazor Server with GRPC mostly back-end.

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.