Select Page

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

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.