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.

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 ponent 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 ponent (.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 ponents because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. ... /?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?

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.

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 ponent 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 ponent (.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 ponents 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./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?

• javascript
• c#
• asp-core
• blazor
• webassembly

3 Answers 3

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.');
                document.head.appendChild(customScript);
        }
    </script>

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.

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 ponent 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 ponent:

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

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