Logo

Documentation v1.0.6

  • Getting Started
  • Server Side Integration
  • Blazor
Preview Upgrade to Pro
This documentation covers the Jet HTML Free  Blazor Server-side integration only.
The Blazor Webassembly is not supported by Jet HTML Free  at the moment.

Overview

This documentation will show how to make a basic integration between Jet HTML Free and Blazor Framework.

Requirements

  1. Download and install .NET SDK.
  2. Install Node.js, NPM, Yarn, Webpack dependacies as explained in Webpack Quick Start.

Create Blazor Application

  1. In your terminal, run the following command to create your Blazor  app: 
    dotnet new blazorserver -o BlazorApp --no-https
  2. This command creates your new Blazor  app project and places it in a new directory called BlazorApp inside your current location. Navigate to the new BlazorApp directory 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.

  1. We need fully copy /theme folder and paste it into a root of our Blazor app.
    2. Inside /theme we have three folders /tools, /src and /dist, the content of our html files will be placed into a different razor files so dist folder with .html files is not required for this integration.
  2. When you run webpack commands by default the output /assets folder is placed into /theme/dist, in our theme we need to place it into /wwwroot folder. We can easily change build output folder path in tools/webpack.config.js.
  3. To change the output path in webpack config we need to update distPath variable: 
    4. …
const distPath = demoPath + '../../wwwroot';
…

Layout component

  1. Let’s fully copy the all content of body tag from /theme/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.
  2. Replace only a html code of the /Shared/MainLayout.razor file, line below is required. 
    @inherits LayoutComponentBase
  3. Copy all link tag from /theme/dist/index.html head tag and paste them into a head tag in file /Pages/_Layout.cshtml
  4. Now we need to replace a content with @Body, which will allow us change a content of the page depending on route. 
  5. ...
<!--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-->
...
  6. Lets import the main theme dependencies inside /Shared/MainLayout.razor in OnAfterRenderAsync lifecycle hook. 
  7. @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:

  1. In your terminal, run the following command: 
    dotnet watch run
  2. 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.
  3. Wait for the app to display that it's listening on http://localhost:5000  and for the browser to launch at that address.
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now