Getting started - Blazor WebApp (.NET 8) - Interactive render mode Server - Global location

Learn how to quickly set up BlazorExpress.Bulma in your Blazor WebApp (Server) project using dotnet templates or manual installation, and how to register 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 package:
    TEXT
    dotnet add package BlazorExpress.Bulma
  2. Add CSS references:
    After the base tag in the head section of the Components/App.razor file, add the following references:
    HTML
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/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 Components/App.razor file, immediately after the _framework/blazor.web.js reference:
    HTML
    <script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"></script>
  4. Register services:
    Add @using BlazorExpress.Bulma to _Imports.razor:
    RAZOR
    @using BlazorExpress.Bulma

3. Usage Example #

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

4. Troubleshooting #

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

References #

If you like BlazorExpress.Bulma, give it a star on GitHub!