This documentation covers the
Good Blazor Server-side integration only.
The Blazor Webassembly is not supported by Good at the moment.
The Blazor Webassembly is not supported by Good at the moment.
Overview
This documentation will show how to make a basic integration between
Good and
Blazor Framework.
Requirements
- Download and install .NET SDK.
- Install Node.js, NPM, Yarn, Webpack dependacies as explained in Webpack Quick Start.
Create Blazor Application
- In your terminal, run the following command to create your
Blazor app:
dotnet new blazorserver -o BlazorApp --no-https - This command creates your new
Blazor app project and places it in a new directory called
BlazorAppinside your current location. Navigate to the newBlazorAppdirectory created by the following command:cd BlazorApp
Setup theme folder
Our theme already contain webpack configuration which we can use to build assets for our Blazor app.
- We need fully copy
/themefolder and paste it into a root of our Blazor app. - When you run webpack commands by default the output
/assetsfolder is placed into/theme/dist, in our theme we need to place it into/wwwrootfolder. We can easily change build output folder path intools/webpack.config.js. - To change the output path in webpack config we need to update
distPathvariable:
Inside
/themewe have three folders
/tools,
/srcand
/dist, the content of our html files will be placed into a different razor files so dist folder with
.htmlfiles is not required for this integration.
…
const distPath = demoPath + '../../wwwroot';
…
Layout component
- Let’s fully copy the all content of body tag from
/theme/dist/index.htmland paste it into/Shared/MainLayout.razor. Also we need to copy all body tag attributes and values (id, class, style) and paste them on body in/Shared/MainLayout.razor. - Replace only a html code of the
/Shared/MainLayout.razorfile, line below is required.@inherits LayoutComponentBase - Copy all link tag from
/theme/dist/index.htmlhead tag and paste them into a head tag in file/Pages/_Layout.cshtml - Now we need to replace a content with
@Body, which will allow us change a content of the page depending on route. -
... <!--begin::Content--> <div class="content d-flex flex-column flex-column-fluid" id="kt_content"> <!--begin::Container--> <div id="kt_content_container" class="container-fluid"> @Body </div> <!--end::Container--> </div> <!--end::Content--> ... - Lets import the main theme dependencies inside
/Shared/MainLayout.razorin OnAfterRenderAsync lifecycle hook. -
@inject IJSRuntime JS @inject NavigationManager MyNavigationManager @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js")); await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js")); } } }
Run Application:
- In your terminal, run the following command:
dotnet watch run -
dotnet watch runcommand builds and startups the app, and then automatically rebuils and restarts the app whenever you make code changes. You can stop the app at any time by selectingCtrl+C. - Wait for the app to display that it's listening on http://localhost:5000 and for the browser to launch at that address.
2022©
Keenthemes
