dotnet new blazorserver -o BlazorApp --no-https
BlazorApp
inside your current location. Navigate to the new
BlazorApp
directory created by the following command:
cd BlazorApp
Our theme already contain webpack and gulp configuration which we can use to build assets for our Blazor app.
/html/theme
folder and paste it into a root of our Blazor app./html/theme
we have
/tools
folder and demo folders, you can leave only demo folder which you will be using, the content of our html files will be placed into a different razor files so
/{demo}/dist
folder with
.html
files is not required for this integration./assets
folder is placed into
/theme/{demo}/dist
, in our theme we need to place it into
/wwwroot
folder. We can easily change build output folder path in
tools/gulp.config.js
and
tools/webpack.config.js
.
…
const distPath = demoPath + '../../../wwwroot';
…
gulp.config.js
and in
gulp.config.json
:
…
dist: ["../../wwwroot/assets"],
…
/html/{demo}/dist/index.html
and 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.razor
file, line below is required.
@inherits LayoutComponentBase
/html/{demo}/dist/index.html
head tag and paste them into a head tag in file
/Pages/_Layout.cshtml
@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-->
...
/Shared/MainLayout.razor
in 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"));
}
}
}
dotnet watch run
dotnet watch run
command 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 selecting
Ctrl+C
.