--- title: JavaScript location in ASP.NET Core Blazor apps author: guardrex description: Learn where to place and how to load JavaScript in Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc ms.date: 02/09/2024 uid: blazor/js-interop/javascript-location --- # JavaScript location in ASP.NET Core Blazor apps [!INCLUDE[](~/includes/not-latest-version.md)] Load JavaScript (JS) code using any of the following approaches: :::moniker range=">= aspnetcore-6.0" * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) * [Load a script from an external JavaScript file (`.js`) collocated with a component](#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) * [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-javascript-file-js) * [Inject a script before or after Blazor starts](#inject-a-script-before-or-after-blazor-starts) :::moniker-end :::moniker range="< aspnetcore-6.0" * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) * [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-javascript-file-js) * [Inject a script after Blazor starts](#inject-a-script-after-blazor-starts) :::moniker-end :::moniker range=">= aspnetcore-8.0" > [!WARNING] > Only place a ``) in the [`` element markup](xref:blazor/project-structure#location-of-head-and-body-content): ```html ... ``` Loading JS from the `` isn't the best approach for the following reasons: * JS interop may fail if the script depends on Blazor. We recommend loading scripts using one of the other approaches, not via the `` markup. * The page may become interactive slower due to the time it takes to parse the JS in the script. ### Load a script in `` markup Place the JavaScript tags (``) inside the [closing `` element](xref:blazor/project-structure#location-of-head-and-body-content) after the Blazor script reference: ```html ... ``` In the preceding example, the `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name. For the location of the script, see . :::moniker range=">= aspnetcore-6.0" ### Load a script from an external JavaScript file (`.js`) collocated with a component [!INCLUDE[](~/blazor/includes/js-interop/js-collocation.md)] For more information on RCLs, see . :::moniker-end ### Load a script from an external JavaScript file (`.js`) Place the JavaScript (JS) tags (``) with a script source (`src`) path inside the [closing `` element](xref:blazor/project-structure#location-of-head-and-body-content) after the Blazor script reference: ```html ... ``` In the preceding example: * The `{BLAZOR SCRIPT}` placeholder is the Blazor script path and file name. For the location of the script, see . * The `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and script file name under `wwwroot`. In the following example of the preceding ` ``` You can also serve scripts directly from the `wwwroot` folder if you prefer not to keep all of your scripts in a separate folder under `wwwroot`: ```html ``` When the external JS file is supplied by a [Razor class library](xref:blazor/components/class-libraries), specify the JS file using its stable static web asset path: `./_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}`: * The path segment for the current directory (`./`) is required in order to create the correct static asset path to the JS file. * The `{PACKAGE ID}` placeholder is the library's [package ID](/nuget/create-packages/creating-a-package-msbuild#set-properties). The package ID defaults to the project's assembly name if `` isn't specified in the project file. * The `{SCRIPT PATH AND FILE NAME (.js)}` placeholder is the path and file name under `wwwroot`. ```html ... ``` In the following example of the preceding ` ``` For more information, see . :::moniker range=">= aspnetcore-6.0" ### Inject a script before or after Blazor starts To ensure scripts load before or after Blazor starts, use a JavaScript initializer. For more information and examples, see . :::moniker-end :::moniker range="< aspnetcore-6.0" ### Inject a script after Blazor starts To inject a script after Blazor starts, chain to the `Promise` that results from a manual start of Blazor. For more information and an example, see . :::moniker-end ## JavaScript isolation in JavaScript modules Blazor enables JavaScript (JS) isolation in standard [JS modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) ([ECMAScript specification](https://tc39.es/ecma262/#sec-modules)). JS isolation provides the following benefits: * Imported JS no longer pollutes the global namespace. * Consumers of a library and components aren't required to import the related JS. For more information, see . [Dynamic import with the `import()` operator](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) is supported with ASP.NET Core and Blazor: ```javascript if ({CONDITION}) import("/additionalModule.js"); ``` In the preceding example, the `{CONDITION}` placeholder represents a conditional check to determine if the module should be loaded. For browser compatibility, see [Can I use: JavaScript modules: dynamic import](https://caniuse.com/es6-module-dynamic-import).