Errors when loading css and js files in my blazor app once I deploy it

good morning I have a app that has been deployed to iis via the publish to folder feature in blazor studio and when I load the page in a web browser It loads kinda but leaves out some css and js files it works 100% when I run it locally so I don't know what I am doing wrong. here's what my page looks like:

here is the errors I am getting in the chorme devloper console

GET https://web.cpsk12.org/surplus/_content/Radzen.Blazor/css/material-base.css net::ERR_ABORTED 403 (Forbidden)
surplus:367

   GET https://web.cpsk12.org/surplus/_content/Radzen.Blazor/Radzen.Blazor.js net::ERR_ABORTED 403 (Forbidden)

surplus:366

   GET https://web.cpsk12.org/surplus/~/js/focus.js net::ERR_ABORTED 404 (Not Found)

surplus:365

   GET https://web.cpsk12.org/surplus/~/js/site.js net::ERR_ABORTED 404 (Not Found)

blazor.web.js:1 [2024-03-18T12:17:58.912Z] Information: Normalizing '_blazor' to 'https://web.cpsk12.org/surplus/_blazor'.
blazor.web.js:1 [2024-03-18T12:17:59.189Z] Warning: Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. To troubleshoot this, visit Host and deploy ASP.NET Core server-side Blazor apps | Microsoft Learn.
log @ blazor.web.js:1
startConnection @ blazor.web.js:1
await in startConnection (async)
startCore @ blazor.web.js:1
start @ blazor.web.js:1
or @ blazor.web.js:1
await in or (async)
nr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
setTimeout (async)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ki @ blazor.web.js:1
blazor.web.js:1 [2024-03-18T12:18:00.261Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'.
log @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
_poll @ blazor.web.js:1
await in _poll (async)
connect @ blazor.web.js:1
await in connect (async)
_startTransport @ blazor.web.js:1
_createTransport @ blazor.web.js:1
_startInternal @ blazor.web.js:1
await in _startInternal (async)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
or @ blazor.web.js:1
await in or (async)
nr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
setTimeout (async)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ki @ blazor.web.js:1
blazor.web.js:1 [2024-03-18T12:18:00.261Z] Error: Circuit has been shut down due to error.
log @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
_poll @ blazor.web.js:1
await in _poll (async)
connect @ blazor.web.js:1
await in connect (async)
_startTransport @ blazor.web.js:1
_createTransport @ blazor.web.js:1
_startInternal @ blazor.web.js:1
await in _startInternal (async)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
or @ blazor.web.js:1
await in or (async)
nr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
setTimeout (async)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ki @ blazor.web.js:1
blazor.web.js:1

   DELETE https://web.cpsk12.org/surplus/_blazor?id=ChZGQzxLuZqMRMPghDuG9g 403 (Forbidden)

send @ blazor.web.js:1
send @ blazor.web.js:1
send @ blazor.web.js:1
delete @ blazor.web.js:1
stop @ blazor.web.js:1
await in stop (async)
_stopInternal @ blazor.web.js:1
await in _stopInternal (async)
stop @ blazor.web.js:1
_stopInternal @ blazor.web.js:1
stop @ blazor.web.js:1
disconnect @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
_poll @ blazor.web.js:1
await in _poll (async)
connect @ blazor.web.js:1
await in connect (async)
_startTransport @ blazor.web.js:1
_createTransport @ blazor.web.js:1
_startInternal @ blazor.web.js:1
await in _startInternal (async)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
or @ blazor.web.js:1
await in or (async)
nr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
setTimeout (async)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ki @ blazor.web.js:1
blazor.web.js:1 [2024-03-18T12:18:00.320Z] Information: Connection disconnected.

this also happens in firefox and edge as well

any help on why this is happening would be amazing!!!!!

Hi @Christopher_DeBrodie,

The first error is 403 (forbidden) which is returned by your web server for some reason. This usually happens due to security settings. You can check if your web server has permissions to the _content directory and all its contents.

The other error is 404 (not found). You have probably used tilde when including your scripts which won't work in Blazor applications. You should try with / instead e.g. <script src="/js/focus.js"></script> and make sure the focus.js file is in the wwwroot/js directory of your application.

There are other errors which indicate that Blazor failed to start as well - those should be addressed as well. There seems to be an unhandled server-side exception. Those can be seen in the event log of your Windows server (if your server is Windows based of course).

1 Like

thank you so much for the quick reply so just to make sure I understand correctly

<script src="~/js/focus.js"></script> does not work in blazor correct?

if so can you please provide an code example on how to include a js file that is in the wwwroot/js folder?

thanks in advance!!! :slight_smile:

I have already done that. Check my reply again.

I just tried your example I changed

<script src="~/js/focus.js"></script>

to

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

in App.razor and I am still getting 404 errors on focus.js and site.js

am I doing something wrong?

please let me know and thank you for all the help so far!

This could happen if the <base href=""> tag is wrong for some reason. Without access to https://web.cpsk12.org/surplus/ I can't tell more.

You can try deploying the application from Visual Studio to see if this makes a difference. By the way what is your server running?

<base href="@NavigationManager.BaseUri" />

is what it is set to. is that correct?

And we are running windows server 2019

lastly the _content folder is not in the root of the surplus folder on the server could that be causing the issues I am getting here is where that folder is stored

Again Thank you for all the help so far!

Yes. However it matters what the rendered output of that tag is. It represents the base URL of the application.

That's where the _content folder should be yes. It seems however that your whole application is not properly configured in IIS. I would recommend using deploy to IIS instead of folder. You may have not created a virtual application in IIS which is critical.

I tried both publishing via folder in visual studio 2022 and tried IIS in blazor studio.
and am still getting the same errors. any other suggestions?

Thanks

I don't have other suggestions. It seems that no files from wwwroot are being returned by your deployed application. Did you check that your application is in fact a virtual application in IIS? It should look as the selected node from this screenshot (Net8Security) and not like a folder (rbsserver for example).

Also did you check what the server-side exception is - use the event viewer of your server.

Finally what is the rendered output of the <base href="">? You can use your browser's devtools to tell that:

I have confirmed that it is a virtual app in IIS and the base href is

<base href="https://web.cpsk12.org/surplus/"> == $0

is that what is supposed to be?

please let me know

Yes, this is precisely what it is supposed to be. Everything looks fine from application point of view - the <base href> is correctly set, the _content directory is where it is supposed to be. There is no reason I can think of for the JS and CSS files to not be downloaded. Still the 403 error means that there is some security setting involved which is specified either at IIS or file system level. I suggest checking the folder permissions and then the other IIS security settings.

thank you for all the help my last question is that if I am publishing my app to the following directory on my server "C:\inetpub\wwwroot\surplus" could that be causing the issues I am having above? if so what directory would you suggest I publish to?

Thanks!

I still think you have some permission issue (if you are still getting 403 errors). Server configuration issues are hard to debug via forum posts I am afraid :slight_smile: Again - check the event log for exceptions and check if the IIS user has access to that directory.

that folder permissions are correct see here


and here is what event log says

Category: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost
EventId: 111
SpanId: c7accb32dd539ad3
TraceId: 5f25179027fa8d92ff9dec3f66401d39
ParentId: 0000000000000000
RequestId: 800006c6-0000-f000-b63f-84710c7967bb
RequestPath: /surplus/_blazor
TransportConnectionId: ClaCCRbuevJTIZP6PirDrg

Unhandled exception in circuit '38z1CNKs0vngEHXN_h0iDp9wHDn_7ZtrFL2xSBayhPk'.

Exception:
Microsoft.JSInterop.JSException: Could not find 'Radzen.preventArrows' ('Radzen' was undefined).
Error: Could not find 'Radzen.preventArrows' ('Radzen' was undefined).
at https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:734
at Array.forEach ()
at l.findFunction (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:702)
at b (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:5445)
at https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:3238
at new Promise ()
at y.beginInvokeJSFromDotNet (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:3201)
at gn._invokeClientMethod (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:62841)
at gn._processIncomingData (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:60316)
at connection.onreceive (https://web.cpsk12.org/surplus/_framework/blazor.web.js:1:53957)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object args)
at Radzen.Blazor.RadzenDropDown`1.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

any other suggestions as to what to try?

Thanks again

I am afraid I don't have further suggestions. If you think the directory is the problem - deploy to another location to see if it would make any difference. By the way it would be of help if you can provide a URL for us to browse of the deployed application. One last thing - did you try browsing in other browsers or incognito mode? Maybe some browser plugin or policy stops third party JS files from loading.