# Flowbite Blazor WASM .NET Template Documenation ## Overview This .NET Template is based off of the .NET 8.0 Blazor WASM Standalonde template but has been enhanced as follows: - Use the tailwindcss-based Flowbite Blazor UI library for all of its Layout, Componets, and Icons - Executes the tailwind standalone executable process the tailwind configuration - When publishing, the BlazorWasmPreRendering.Build is used to generate the static HTML for the side to be To quickly scaffold a new project using the using the CLI. The following project types include: ### Scaffold a Blazor WebAssembly Standalone App - __For Window Platform:__ ```powershell dotnet new install Flowbite.Blazor.Templates dotnet new flowbite-blazor-wasm -o {{PROJECT_NAME}}; cd {{PROJECT_NAME}} mkdir .\tools -Force cd .\tools Invoke-WebRequest -Uri https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe -OutFile tailwindcss.exe -UseBasicParsing cd .. dotnet build ``` - __For Mac OSX Arm64:__ ```zsh dotnet new install Flowbite.Blazor.Templates dotnet new flowbite-blazor-wasm -o {{PROJECT_NAME}}; cd {{PROJECT_NAME}} mkdir ./tools cd ./tools curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64 chmod +x tailwindcss-macos-arm64 mv tailwindcss-macos-arm64 tailwindcss cd .. dotnet build ``` ## Project Structure {{PROJECT_NAME}} ├── App.razor ├── Components │   └── AppVersion.razor ├── Layout │   ├── AppFooter.razor │   ├── AppNavBar.razor │   ├── AppSidebar.razor │   └── MainLayout.razor ├── {{PROJECT_NAME}}.csproj ├── {{PROJECT_NAME}}.sln ├── Pages │   ├── Counter.razor │   ├── Home.razor │   ├── Icons.razor │   └── Weather.razor ├── Program.cs ├── Properties │   └── launchSettings.json ├── README.md ├── _Imports.razor ├── postcss.config.js ├── tailwind.config.js └── wwwroot ├── css │   ├── app.css │   └── app.min.css ├── favicon.png ├── index.html ├── js │   └── app.js └── sample-data └── weather.json ## Important File Contents ### {{PROJECT_NAME}}.csproj ```xml net8.0 enable enable true false postcss.config.js tailwind.config.js 0.0.1-alpha.1 true true ``` ### Program.cs ```csharp using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using PROJECT_NAME; using Flowbite.Services; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.RootComponents.Add("head::after"); // Required for prerendering (BlazorWasmPreRendering.Build) ConfigureServices(builder.Services, builder.HostEnvironment.BaseAddress); await builder.Build().RunAsync(); // Required for prerendering (BlazorWasmPreRendering.Build) // extract the service-registration process to the static local function. static void ConfigureServices(IServiceCollection services, string baseAddress) { services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(baseAddress) }); services.AddFlowbite(); } ``` ### wwwroot/index.html ```html PROJECT_NAME
Loading...
An unhandled error has occurred. Reload 🗙
``` ### App.razor ```razor Not found ``` ### _Imports.razor ```razor @using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Sections @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop @using Flowbite.Base @using Flowbite.Components @using Flowbite.Components.Tabs @using Flowbite.Components.Table @using Flowbite.Icons @using Flowbite.Services @using static Flowbite.Components.Button @using static Flowbite.Components.Tooltip @using static Flowbite.Components.Avatar @using static Flowbite.Components.Sidebar @using static Flowbite.Components.SidebarCTA @using static Flowbite.Components.Dropdown @using PROJECT_NAME @using PROJECT_NAME.Layout @using PROJECT_NAME.Components ``` ### tailwind.config.js ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "App.razor", "./wwwroot/**/*.{razor,html,cshtml,cs}", "./Layout/**/*.{razor,html,cshtml,cs}", "./Pages/**/*.{razor,html,cshtml,cs}", "./Components/**/*.{razor,html,cshtml,cs}" ], darkMode: 'class', theme: { extend: { colors: { primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a", "950": "#172554" } }, maxHeight: { 'table-xl': '60rem', } }, fontFamily: { 'body': [ ... font names ... ], 'sans': [ ... font names ... ], 'mono': [ ... font names ... ] } } } ``` ### Layout/AppNavBar.razor ```razor @inherits FlowbiteComponentBase
@if (ResponsiveMenuEnabled) { } PROJECT_NAME Logo PROJECT_NAME
@code { /// /// Boolean parameter to determine if the header shows the collapsible menu /// [Parameter] public bool ResponsiveMenuEnabled { get; set; } = true; /// /// Event callback that fires when the responsive menu toggle button is clicked /// [Parameter] public EventCallback OnResponsiveMenuToggle { get; set; } /// /// Boolean parameter to determine if the responsive menu is open /// [Parameter] public bool IsOpen { get; set; } } ``` ### Layout/AppSidebar.razor ```razor @using Microsoft.AspNetCore.Components.Routing
Home Counter Weather Icons
``` ### Layout/MainLayout.razor ```razor @inherits LayoutComponentBase @inject IJSRuntime JSRuntime
@Body
An unhandled error has occurred. Reload 🗙
@code { private bool _isSidebarOpen = false; private void HandleMenuToggle() { _isSidebarOpen = !_isSidebarOpen; } } ``` ### Layout/AppFooter.razor ```razor ```