how to use script files in blazor project inside index.html?

Question

I have a blazor webassemly project , I want to use javascript files , I put them in wwwroot folder and call them in index.html by thos way <script src="/js/bracket.js"></script> I am sure the path is correct but also not working

How to include scripts inside index.html?

Answer 1

Hi @Haneen Al-fakhry,

I have test it in my local, I know you can't find it in browser developer tools. But the javascript files has been loaded successfully, you can test in browser window.

If you want check the files in browser developer tools, we need include the js when debugging/deploying. Like below:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.11" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.11" PrivateAssets="all" />
    <!--// add this line-->
    <Content Include="js/*.js" CopyToOutputDirectory="PreserveNewest" />
  </ItemGroup>
  
</Project>

Then we can find all the js files.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Jason

Answer 2

you shoudn't have to add the content include for content in the wwwroot folder. but check the deployed wwwroot folder. most likely the url is wrong. as the base href is set in the index.html file, you should use relative.

<script src="js/bracket.js"></script>