automatically copy static files like css or js from a Blazor component lib into the app's wwwroot - TagMerge
3automatically copy static files like css or js from a Blazor component lib into the app's wwwrootautomatically copy static files like css or js from a Blazor component lib into the app's wwwroot

automatically copy static files like css or js from a Blazor component lib into the app's wwwroot

Asked 1 years ago
0
3 answers

The files from the Razor Class Library project should not be copied into the project referencing it (i.e. your Blazor frontend). The runtime does some magical rerouting.

In the page where you want to consume those static assets, you should use a URL such as _content/YourClassLibraryName/path-from-wwwroot. For example, if you have a file like flair.css in your wwwroot folder in the RCL, you would import it in the frontend project as

<link href="_content/YourClassLibraryName/flair.css" rel="stylesheet" />

Similarly, an image file such as solarFlare.png sitting in your wwwroot/img folder would be:

YourClassLibraryName could either be a project name or a NuGet package name, if you're consuming the RCL via NuGet. They should behave the same.

Docs:

Source: link

0

One thing in this library would be the reuse of the javascript alert() method. I know how to do this, this involves adding this in a .cshtml page:
<script>
  Blazor.registerFunction('Alert', (message) => {
      alert(message);
  });
</script>
and this in my code:
public void Alert(string message)
{
     RegisteredFunction.Invoke<object>("Alert", message);
}
I ended up with creating my own blazor component containing my javascript, like this:
public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent
{

    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Alert', (message) => { alert(message); });");
        builder.CloseElement();
    }
}
And adding it to my app.cshtml like this:
@addTagHelper *, BlazorExtensions

<Router AppAssembly=typeof(Program).Assembly />

<BlazorExtensionScripts></BlazorExtensionScripts>

Source: link

0

By default, publishing a Blazor WebAssembly app places the app's static assets, including Blazor framework files (_framework folder assets), at the root path (/) in published output. The <StaticWebAssetBasePath> property specified in the project file (.csproj) sets the base path to a non-root path:
<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>
In the Client app's project file (.csproj) or the standalone Blazor WebAssembly app's project file (.csproj):
<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>
Configure options through dependency injection (DI) in Program.cs using StaticFileOptions:
using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = provider;
});
Configure the custom file provider in the first call with StaticFileOptions. The second middleware serves blazor.server.js, which uses the default static files configuration provided by the Blazor framework.
using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles();
You can avoid interfering with serving _framework/blazor.server.js by using MapWhen to execute a custom Static File Middleware:
app.MapWhen(ctx => !ctx.Request.Path
    .StartsWithSegments("/_framework/blazor.server.js"),
        subApp => subApp.UseStaticFiles(new StaticFileOptions() { ... }));

Source: link

Recent Questions on blazor

    Programming Languages