MacOS error while starting the Blazor.Server-Project

[baristikir]

I am using Visual Studio 2019 for MacOS and just followed the getting started section of the readme. Creating a project and trying to debug without doing any changes to it.
Selecting Blazor.Server project and debugging gave me couple of errors and the website was only on "Loading..." .

Inspecting it in the Browser gave me these errors:

[2020-06-24T21:47:46.294Z] 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'. 

The package manager integrated in Visual Studio gave me these errors:

Microsoft.JSInterop.JSException: Could not find 'BlazorXamarin' in 'window'.
Error: Could not find 'BlazorXamarin' in 'window'.
    at http://localhost:5080/_framework/blazor.server.js:8:30748
    at Array.forEach (<anonymous>)
    at p (http://localhost:5080/_framework/blazor.server.js:8:30709)
    at http://localhost:5080/_framework/blazor.server.js:8:31416
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:5080/_framework/blazor.server.js:8:31390)
    at http://localhost:5080/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (http://localhost:5080/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (http://localhost:5080/_framework/blazor.server.js:1:17165)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at BlazorMobile.Common.Components.BlazorMobileComponent.SetRemoteDebugEndpoint()
   at BlazorMobile.Common.Components.BlazorMobileComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
The thread 1421905 has exited with code 0 (0x0). 

I don't actually know what the problem is. I have updated the xamarin forms too.
I was trying to work with the iOS project. I am using xcode-simulator as debugging option for that and therefore I tried to debug the Server to get it running.

[Daddoon]

BlazorMobile default deployment has never been tested on MacOS.
I can't guarantee for now that all the pipeline is working as expected.

There is some events that should be done at build time, same, i never tested on it.

For the BlazorXamarin error, can you double check that your project is loading blazormobile.js in your index.html file ?
Also i think your first reported error is just a consequence of the second one you mentionned, as an exception has been thrown during the initial rendering.

Otherwise, keep in mind that the iOS deployment will not work on the simulator (at least the Web part, native is ok) because Apple decided to not support WebAssembly inside the iOS Simulator. So yes, if you don't have any Apple device, you can at least test the remote debugging functionnality with Server mode on MacOS and Native in the simulator.

I will try to do some test on my Mac tomorrow to see why it doesn't work by default.

[baristikir]

Thank you so much for the quick response. I didn't know that the iOS Simulator isn't supporting WebAssembly, good to know this thanks. I. will try this later on but I tried it also on my Windows PC and by default I am getting the same error when I start the BlazorMobile.Server . The blazormobile.js is in index.html as <script> but how can I do the double check?

Does the BlazorMobile work for Android? I would build up there instead of the iOS appliaction.

[baristikir]

Alright now I saw this in my console:
Failed to load resource: the server responded with a status of 404 (Not Found) (blazormobile.js)

[Daddoon]

Yes, BlazorMobile work with iOS, Android, UWP and with Electron for Desktop.
Using simulator doesn't work only for iOS.

So it works fine with Android, with a real device or a simulator.

I'm unable to reproduce your error even with a freshly created project.
Your main issue here is that it seem that the program doesn't find the Razor Class Library needed that reference the javascript file.

Can you check this:

• That TestProject.Blazor.Server reference the BlazorMobile.Web package
• That .NET Core 3.1.400-preview-015151 is installed on your machine
• On my machine i have also .NET Core 5.0.100-preview.2.20176.6 installed, but i think it's a version installed by my current VS2019 Preview (16.7.0 Preview 2.0).
• Preferably test this on Windows and with VS2019 Preview instead.
• Additionnaly can you just tell me if the default Android project app run fine ?
• Does starting the TestProject.Blazor project alone in Debug does works ? I mean that blazormobile.js does exist at boot and that the default app page start, even if we are not connecting it yet to a native end.

[baristikir]

Hello, thank you again, I did the following steps, and here are the results:

1. Yes, the project reference to BlazorMoblie.Web is in the TestProject.Blazor.Server.
2. I had .NET Core 3.1.301 . Now updated to the .NET Core 5.0.100-preview.2.20176.6.
3. Tested on MacOS so far and it doesn't work. Also it doesn't work on Windows.
   Look at this, I just recorded it : https://www.youtube.com/watch?v=JYOFAEhKEFk
4. The android project runs fine. All pages are working (Home Page, BlazorMobile Page, Count Page and FetchData Page).
   Loook at this, I just recorded it also: https://www.youtube.com/watch?v=IsForYB_-4I
5. Yes the Testproject.Blazor runs only the BlazorMobile Page isn't not working in the Web.

[Daddoon]

1. Good !
2. Ok
3. Thanks for the video
4. Cool, so the issue with Razor Class Library is only related to the Server project. The WebAssembly project does publish then package all the required content, and as it's working in Android, this mean that the publish pipeline is ok on this side ! While using the Server for debugging, Visual Studio should soft link the referenced class library, as Razor Class Library are not published while doing debugging session, and it's by design. But for whatever reason it doesn't work on your machine. Does your current username folder have a space in it ? I mean, if you open %appdata% folder on Windows, does parent folder with your username with a space ?
5. It's expected that it doesn't work on the BlazorMobile page as the button open a Native dialog, and you are debugging in the browser. For make it working, you would have to launch your Native app on one side, and this project on the other side, and configure properly the IP and Port for remote debugging. Then clicking on the button would open the Native dialog in the native app, even if you clicked in the button from your browser. Read the documentation about the Remote debugging purpose.

In the end i think it's more about a Razor Class Library functionnality bug.
Are you using VS2019 or VS2019 Preview actually ?

All my tests are for now made from VS2019 Preview.

You can find more informations about RCL issue here:

https://stackoverflow.com/questions/60040793/404-with-static-content-in-razor-class-library-rcl
dotnet/aspnetcore#14562

One "dirty" quick workaround for now if you want to test and fix this issue later, would be to:

• Open %userprofile%.nuget\packages\blazormobile.web\3.2.8\staticwebassets folder
• Copy the blazormobile.js file to your TestProject.Blazor project, in wwwroot
• Reference it directly instead of the RCL reference you have in index.html

But beware, by doing this, the file will not be automatically synchronized if some changes are done in the future in the plugin, as you will reference your own version of the file.

This workaround is mainly for you to test.

Oddly, i don't have any issue on my side with the same scenario and project name.

[baristikir]

I am using on Mac Visual Studio 2019 Community and on Windows Visual Studio 2019 Enterprise.
Both had the same .net core sdk's. Yes on Windows I have spaces in the name, does this occur some problems?

Is it possible to add in an already existing Blazor WebAssembly the BlazorMobile? I mean like the additional Xamarin.Forms and add the NuGet-Packages to these also on the Blazor.Client? If yes I would try to rebuild it with the Blazor.Server I have built.

[Daddoon]

I have seen that sometime it may be problematic in some case if the current user folder as a space, as the space may be interpreted as a end of a path declaration. I'm not saying that you have this bug here, but it's just a sanity check as someone had some issue for this reason.

Yes of course you can use your own Blazor WebAssembly project with BlazorMobile.

The only thing is that i didn't write any Step by Step tutorial to do this for now, and even if i do it, it would be nice to write the "extended" version of this guide, meaning how to convert your Blazor web app stucture to a structure compatible with web (standalone) and mobile deployment at the same time.

Unfortunately, i'm a little busy theses days, si i can't write this yet.

I possible, can you please try with Visual Studio 2019 Enterprise Preview on Windows ? https://visualstudio.microsoft.com/fr/vs/preview/

Also, feel free to post here a ZIP file with your buggy project, that i can test on my machine.

[baristikir]

Yes, a documentation for the integration of BlazorMobile into an existing Blazor WebAssembly project would be really great! I have tried it to add empty Xamarin.Forms and manually install all packages like in the template but can't get it running. With Xamarin.Forms I am getting rollback errors so I tried adding only the Android Application and add all NuGet packages but this was also not working for me. And if I got it running there were Internal 500 Errors.. I am doing something wrong I guess.

The .zip was too big to upload it here, so I just pushed it into this repository: https://github.com/brstkr/BlazorMobileTemplate

But as I said the code is untouched it is just the template for creating the project with this command:
dotnet new blazormobile -n MyProjectName

[Daddoon]

I will take a look tomorrow

[baristikir]

Can this exception be occured by any launchSettings.json ? I added in the Server-launchSettings.json the part which is in the Blazor.Client project:

• commented out "launchUrl" section
• added the "environmentVariables" section also any "applicationUrl" section.

"MyProjectName.Blazor.Server": {
        "commandName": "Project",
        /* "launchUrl": "http://localhost:5080/"  <--- commented this part out */
        "environmentVariables": {
              "ASPNETTCORE_ENVIRONMENT": "Development"
          },
        "applicationUrl": "https://localhost:5001;http://localhost:5000"
       }
    }

Also, I took the part in Program.cs out for default project launch settings:

...
   //.UseKestrel(options => 
   //{
       //options.Listen(IPAddress.Loopback, 5080);
   //})
...

With these changes the Server-Project worked again.

PS: On Windows didn't work either without these changes, also the steps updating .NET Core SDK, using VS 2019 Enterprise Preview and clearing all caches of the server project were without any success.

[Daddoon]

When you say "it worked again" does this mean that the blazormobile.js file loaded ?

The cause and consequence seems weird to me (and more likely a bug somewhere, but don't know if it's related to this project or ASP.NET Core).
The launchURL change does not have any incidence.

Listening on port 5080 is totally arbitrary, but this change is done in order to force Kestrel to launch in HTTP mode for the tests, instead of the default HTTPS.

Why ? It can of course load with HTTPS, but you may have an exception (but feel free to test) when the Blazor Server app will try to remote debug your specified endpoint (IP / Port). In order to communicate with the native side (either when deployed or for debugging purpose), the Web app try to connect to a websocket endpoint. If you are in HTTPS mode, the browser may enforce you to use the WSS protocol instead of WS, and as the native end does not carry any WSS / Certificate encryption, it will fail to communicate.

But i don't have done tests on this scenario recently. Are you able to communicate with a deployed Android app from your browser, when you set the correct IP (targeting the IP of your Android device), even with HTTPS enabled in your server project ?

[baristikir]

No, it was kinda (working). The blazormobile.js was loading but were unable to connect and the WebSocket connection was not working("net::ERR_CONNECTION_REFUSED"). Communication with Android will probably not work.
I changed it back to the old version. Using IIS Express didn't cause so many problems at least the WebView loaded.

[Daddoon]

Interesting.

I remember someone that had exactly the same problem with static resources returning 404 while using "project deployment" but working while using IIS Express.

I don't know from where this error is coming, i can be wrong but this strange behavior with static resource is a .NET Core issue in my opinion, but i can be wrong.

If IIS Express mode is working with default template, you should be ok to do remote debugging with Android (or iOS, or anything) if you set every IP / Port correctly like stated in the doc.

Maybe an additional bit to check, any Firewall configuration that would prevent connecting, if you have issue.
Keep me informed !

[arivera12]

Btw, I never got the web socket connection working properly, I always get that socket error @brstkr just mentioned above.

[Daddoon]

@arivera12 This is mandatory for remote debugging.

Please check :

• IP and Port configurations on Blazor app.
• Port configuration on Native side
• That you have enabled debug capabilities for remote debugging. See https://github.com/Daddoon/BlazorMobile#enable-remote-debugging
• Try to disable Windows firewall temporarily, as it may block ?
• Check that your Device and PC can communicate on the same Network. Check your devices connectivity

[arivera12]

@arivera12 This is mandatory for remote debugging.

Please check :

• IP and Port configurations on Blazor app.
• Port configuration on Native side
• That you have enabled debug capabilities for remote debugging. See https://github.com/Daddoon/BlazorMobile#enable-remote-debugging
• Try to disable Windows firewall temporarily, as it may block ?
• Check that your Device and PC can communicate on the same Network. Check your devices connectivity

Let me give it a try

[OnlyNoob]

Hi, this article will help How to deal with the "HTTP 404 '_content/Foo/Bar.css' not found" when using Razor component package on ASP.NET Core Blazor app, now it works for me.

[Daddoon]

Thanks for the report ! I will try to address this in the doc in the future