Getting started - Blazor WebAssembly (.NET 8)

Learn how to quickly set up BlazorExpress.Bulma in your Blazor WebAssembly project using dotnet templates or manual installation, and how to register the required services.

Prerequisites #

  • .NET 8 SDK (Download) or later version
  • Visual Studio 2022 or later / VS Code / JetBrains Rider
  • Basic knowledge of Blazor WebAssembly

1. Using dotnet Templates #

  1. Install the template:

    TODO: Update the instructions.

    The template sets up Bulma CSS, the required services, and sample components.

2. Manual Installation #

  1. Add the NuGet packages:
    Install BlazorExpress.Bulma. If you plan to use chart components, also install BlazorExpress.ChartJS version 1.2.2.
    TEXT
    dotnet add package BlazorExpress.Bulma
dotnet add package BlazorExpress.ChartJS --version 1.2.2
  2. Add CSS references:
    After the base tag in the head section of the wwwroot/index.html file, add the following references:
    HTML
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css">
  3. Add JS references:
    Insert the following references into the body section of the wwwroot/index.html file, immediately after the _framework/blazor.webassembly.js reference. The ChartJS references are required when you use chart components and match the current docs and demos: Chart.js 4.4.1 and chartjs-plugin-datalabels 2.2.0.
    HTML
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>
<script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"></script>
  4. Register services:
    Add @using BlazorExpress.Bulma to _Imports.razor:
    RAZOR
    @using BlazorExpress.Bulma
    If you use chart components, also add @using BlazorExpress.ChartJS to the relevant page or to a folder-level _Imports.razor for your chart views.

3. Usage Example #

  1. Add a Bulma component to Pages/Home.razor:
    RAZOR
    <Button Color="ButtonColor.Primary">Hello BlazorExpress.Bulma!</Button>

4. Troubleshooting #

  • Ensure all CSS and JS references are correct in index.html.
  • Restart the development server after making changes to static files.
  • Check the browser console for errors if components do not render as expected.

References #

DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!