CODEWITHSUNDEEP
javascriptc#asp.net-coreblazorwebassembly
azzurro123
azzurro123

Reputation: 581

Blazor WebAssembly load different scripts for specific Environment

I'm currently working on a .NET Standard 2.1 Blazor WebAssembly application. I try to include or exclude JavaScript files in my index.html according to an environment variable.

The Blazor WebAssembly App is NOT Asp.NET Core hosted.

enter image description here

In .NET Core there are usually Environment Tag Helpers like in the following example:

<environment include="Development">
    <script src="js/app.js"></script>
    <script src="js/helpers.js"></script>
</environment>

<environment exclude="Development">
    <script src="js/site.min.js"></script>
</environment>

As already discussed in this question Blazor WebAssembly Environment Variables, the Environment Tag Helpers are server side code and thus don't work in Blazor WASm.

Now I try to find a good solution to include/exclude JavaScript files according to the Environment variable in Blazor WebAssembly.

The first idea was, similar like for CSS, to create a component called <Scripts> to load the different script files on the index.html like this:

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment hostEnv
   
@*Check the environment value*@
@if (hostEnv.IsDevelopment())
{
    <script src="js/app.js"></script>
    <script src="js/helpers.js"></script>
}
else
{
    <script src="js/site.min.js"></script>
}

@code {}

Unfortunately this doesn't work, because the <script> Element is not allowed to be used in a Blazor component (.razor file).

The following error occurs: The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user. ... Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. ... https://go.microsoft.com/fwlink/?linkid=872131

How do you load different scripts according to the Environment Variable i.e. Development, Production or Staging in Blazor Webassembly?

Do you know how to solve this problem?

Upvotes: 3

Views: 6786

Answers (3)

Guilherme Meinlschmiedt Abdo
Guilherme Meinlschmiedt Abdo

Reputation: 731

I wanted to add Tailwind CDN script tag just during development. I ended up using the solution below:

index.html

    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        // If localhost, add tailwind CDN (or any other script that you want)
        if (window.location.hostname == 'localhost') {
                var customScript = document.createElement('script');
                customScript.setAttribute('src', 'https://cdn.tailwindcss.com');
                document.head.appendChild(customScript);
        }
    </script>

Upvotes: 2

agua from mars
agua from mars

Reputation: 17434

Simply copy your index.html code in a .cshtml (named BlazorApp.cshtml in the following sample) in your server project and fallback to this page.

public void Configure(IApplicationBuilder app)
{
...
    app.UseEndpoints(endpoints =>
    {
        ...
        endpoints.MapFallbackToPage("/BlazorApp");
    }
}

And update the code with <environment> tags for your conveniance.

Upvotes: 1

Umair
Umair

Reputation: 5481

Please check the solution in this answer (same question as you linked above) and that seems to work.

Basically the workaround is to use this in a new component called Head.razor as per the solution:

@inject IWebAssemblyHostEnvironment hostEnv

@if (hostEnv.IsDevelopment())
{
    <title>BlazorWasmApp - In Debug</title>
    <link href="css/debug.css" rel="stylesheet" />
}
else
{
    <title>BlazorWasmApp - Not Debug</title>
    <link href="css/live.css" rel="stylesheet" />
}

New Head.razor component:

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);            
    builder.RootComponents.Add<App>("app");

    //Add the Head to root components
    builder.RootComponents.Add<Head>("head");            
            
    builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });           
    await builder.Build().RunAsync();
}

Upvotes: 1

Related Questions