Fallback to local JS from CDN

[VVB26W34]

hi,

i have a question regarding using of ScriptTagHelper with JS part of this library. I have successfully added Office UI Fabric Core CSS with fallback from CDN using LinkTagHelper, but am still struggling with the Fluent UI Web Components JS

it seems that the main issue here stems from the fact Web Components are done via ES Modules. i tried testing for one of the exports, for example, FluentDesignSystem. this does not seem to work though, as the modules, as far as i was able to understand, are executed after the whole page is loaded. however, the code generated by the FallbackSrc and FallbackTestExpression is the regular JS, and as such executes instantly, which means the test does not work. apparently, defer attribute might help, but i was unable to find a way to add that to the ScriptTagHelper

perhaps i am missing something and it is actually possible to setup the fallback to local file in case CDN fails?

sorry if this question might be a bit dumb. i am fairly new to front-end dev and still finding my way around there

[vnbaaij]

Hi, With Blazor in general you don't make use of ScriptTagHelper. When using this library, you definitely wouldn't need to use the (very old) Office UI Fabric Core CSS file. The styling is built in though the FluentUI implementation in FAST.
Also when using this library you don't have to work with exports directly. With Blazor that is all abstracted away for you. I suggest you start with the basic docs to get a better understanding of how it all works together. See for example https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro

[VVB26W34]

hi,

i am terribly sorry for such a long wait.

i am afraid you might have missed the point of the question. as i understand, there are two ways of using the Fluent UI Web Components JS module in a Blazor project: either from a CDN or a local copy. however, using only one of those is not the optimal solution, as you might already know: CDN might still fail, but always loading local copy slows the app a bit.

ASP.NET Core provides a way to mitigate that, through the use of ScriptTagHelper and LinkTagHelper. the first one just does not seem to work with the JS modules. i also do not understand why you vote against using it, as i have successfully used it with stylesheets and scripts from other libraries before i discovered this awesome project.

i understand that the Microsoft.Fast.Components.FluentUI part installed through NuGet will always be served from local files, and that is okay. however, i would like to offload as much as i can to CDN but still have backup plan. so, what other alternative can i use to set up fallback from CDN-provided web-components.min.js to local one?

thanks

[vnbaaij]

Hi,

As described in the README (https://github.com/microsoft/fast-blazor#getting-started) there are indeed two ways to get the web-components script in the project. The components also make use of the script through JavaScript interop icw modules (https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#javascript-isolation-in-javascript-modules). To specify where the module can be imported from, we've added a setting in appsettings.json (FluentWebComponentsScriptSource). If you don't specify a location, it falls back to the CDN script.
This is all configuration done at development time. There is no functionality in place (or planned atm) to do this at runtime.

ASP.NET Core provides a way to mitigate that, through the use of ScriptTagHelper and LinkTagHelper. the first one just does not seem to work with the JS modules. i also do not understand why you vote against using it, as i have successfully used it with stylesheets and scripts from other libraries before i discovered this awesome project

But have you also used it with other Blazor libraries? I think it just doesn't work in such a setup

[VVB26W34]

To specify where the module can be imported from, we've added a setting in appsettings.json (FluentWebComponentsScriptSource). If you don't specify a location, it falls back to the CDN script.
This is all configuration done at development time.

thanks for pointing that out. i have not looked at the source of DesignToken before. having done that, though, i now have another question (though i may be completely misunderstanding this part): does the Microsoft.Fast.Components.FluentUI package (DesignToken component, specifically) always pull the latest JS module version from jsdelivr unless i explicitly specify the location in my own appsettings.json like you do in the example apps? If it does, may that create issues when the main app uses pinned version of the module (like you recommend in the README) that is not up-to-date? For example, if i my app was created with v1 components and was not updated yet, but the DesignToken pulls the v2 components for itself, would not that break some stuff?

There is no functionality in place (or planned atm) to do this at runtime.

so, i guess i may create an issue in the ASP.NET Core repository regarding support for modules in ScriptTagHelper?

But have you also used it with other Blazor libraries? I think it just doesn't work in such a setup

yeah, you are most probably right. i only used Bootstrap with Blazor Server before (and not any bindings like you do in this project, just the regular CSS and JS bundle like it is added in the default Blazor template), so there is that i guess.

[vnbaaij]

does the Microsoft.Fast.Components.FluentUI package (DesignToken component, specifically) always pull the latest JS module version from jsdelivr unless i explicitly specify the location in my own appsettings.json like you do in the example apps?

Correct. It pulls the latest. But as you say, you have to option to pin it to a specific version through appsettings.json (and the one in index.html/_Layout.cshtml

so, i guess i may create an issue in the ASP.NET Core repository regarding support for modules in ScriptTagHelper?

Yes, that would be the correct place to do so