EmbeddedBlazorContent – how to include static content from blazor libraries

If you want to include some static resources from the Blazor component library use “EmbeddedBlazorContent” tool.

Source: https://github.com/SamProf/EmbeddedBlazorContent

Create static content in Blazor component library

Create “content” folder in the root of the library project and add CSS and JS files in.

Add embeded resource build action on all the files

Open properties on each resource file and select “Embedded resource” build action on it.

Additional attributes for embedded resource in the project file

Open .CSPROJ project file and edit EmbeddedResource definition to have additional LogicalName definition.

For CSS files:

  <LogicalName>blazor:css:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>

For JS files:

 <LogicalName>blazor:js:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>

Sample:

  <ItemGroup>
    <EmbeddedResource Include="content\bisaga_core.css">
      <LogicalName>blazor:css:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="content\bisaga_core.js">
      <LogicalName>blazor:js:%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </EmbeddedResource>
  </ItemGroup>

Add EmbeddedBlazorContent library to blazor server side web project

Startup.cs

Add configuration for embeded content library to Configure metod in Startup.cs

# Startup.cs
app.UseEmbeddedBlazorContent(typeof(Bisaga.Core.Components.BsgComponentBase).Assembly);

_Host.cshtml

Add call to EmbeddedBlazorContent where you wish to include embedded files.

@using EmbeddedBlazorContent

<head>
  ...
    @Html.EmbeddedBlazorContent()
</head>

Syncfusion EJ2 AspNet Core Blazor components installation

If you need professional and supported set of components for server side / client side Blazor web applications use Syncfusion components.

More info:

Installation – NuGet packages :

  • Syncfusion.EJ2.Blazor

Startup.cs

Configure method

Licensing is not needed in case of preview version and library don’t even contain “Licensing” namespace.

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("...licence string...");

_Host.cshtml

@addTagHelper *, Syncfusion.EJ2.Blazor

<head>
    <link href="https://cdn.syncfusion.com/ej2/17.2.29/fabric.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ejs.interop.min.js"></script></head>

_Imports.razor

@using Syncfusion.EJ2.Blazor<br>
@using Syncfusion.EJ2.Blazor.Calendars

Components usage in razor files

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<br />
<EjsCalendar></EjsCalendar>

The result

If everything is deployed as expected you should see similar result page: