How I Got Started with Bolero!

Background

It is useful to know that I'm installing a Webassembly framework in the first place. So the goal is to write a page in F#/HTML. Running some .dll in the background. It is the reader's job to determine, if it is useful for a specific task.

Installing the Framework

Installing the framework was easy. Worked just like the https://fsbolero.io suggested.

I went to https://dotnet.microsoft.com/download/dotnet-core/3.0 and downloaded the SDK 3.0.100-preview7-012821. That was the highest available at the time. Installed the .NET Core Installer: x64 in the Windows group. (well. First time I accidentally downloaded the mac version, which had .pkg extension. After a few minutes trying to find out how/where to add-in a .pkg to Visual Studio 2017, I had a hinch that it should work from console only... Than found out my mistake and downloaded the .exe)

Running the Dotnet Commands

After that, I opened a cmd and run the following commands.

Install the project template:

dotnet new -i Bolero.Templates

(0.5.28-preview* was the actual version of the template.)

Create a project:

dotnet new bolero-app -o Atrium

(Atrium was the name of my new web project.)

Build and run:

cd Atrium
dotnet build

Now there were some complications (I omitted the actual full path with "...")>

  Restore completed in 300,97 ms for e:\...\Atrium\src\Atrium.Client\Atrium.Client.fsproj.
  Restore completed in 513,38 ms for e:\...\Atrium\src\Atrium.Server\Atrium.Server.fsproj.
  You are using a preview version of .NET Core. See: https://aka.ms/dotnet-core-preview
  You are using a preview version of .NET Core. See: https://aka.ms/dotnet-core-preview
  Atrium.Client -> e:\...\Atrium\src\Atrium.Client\bin\Debug\netstandard2.0\Atrium.Client.dll
...
EXEC : error : Could not load type 'System.Text.Json.Serialization.JsonSerializerOptions' 
     from assembly 'System.Text.Json, Version=4.0.0.0, Culture=neutral, 
     PublicKeyToken=cc7b13ffcd2ddd51'. 
     [e:\todelete\Atrium\src\Atrium.Client\Atrium.Client.fsproj]
     at Microsoft.AspNetCore.Blazor.Build.BootJsonWriter.GetBootJsonContent
     (String assemblyFileName, String entryPoint, String[] assemblyReferences, 
     IEnumerable`1 embeddedContent, Boolean linkerEnabled)
     at Microsoft.AspNetCore.Blazor.Build.BootJsonWriter.WriteFile
     (String assemblyPath, String[] assemblyReferences, String[] embeddedResourcesSources, 
     Boolean linkerEnabled, String outputPath)
     at Microsoft.AspNetCore.Blazor.Build.DevServer.Commands.WriteBootJsonCommand.
     <>c__DisplayClass0_0.<Command>b__0()
C:\Users\MR-TaNk\.nuget\packages\microsoft.aspnetcore.blazor.build\
3.0.0-preview6.19307.2\targets\Blazor.MonoRuntime.targets(633,5): error MSB3073: 
The command "dotnet "C:\Users\MR-TaNk\.nuget\packages\microsoft.aspnetcore.blazor.build\
3.0.0-preview6.19307.2\targets\../tools/Microsoft.AspNetCore.Blazor.Build.dll" 
write-boot-json "obj\Debug\netstandard2.0\Atrium.Client.dll" 
--references "e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\
bootjson-references.txt" --embedded-resources 
"e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\embedded.resources.txt" 
--linker-enabled --output 
"e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\blazor.boot.json"" 
exited with code 1. [e:\...\Atrium\src\Atrium.Client\Atrium.Client.fsproj]

Build FAILED.

EXEC : error : Could not load type 'System.Text.Json.Serialization.JsonSerializerOptions' 
from assembly 'System.Text.Json, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=cc7b13ffcd2ddd51'. [e:\todelete\Atrium\src\Atrium.Client\Atrium.Client.fsproj]
C:\Users\MR-TaNk\.nuget\packages\microsoft.aspnetcore.blazor.build\
3.0.0-preview6.19307.2\targets\Blazor.MonoRuntime.targets(633,5): error MSB3073: 
The command "dotnet "C:\Users\MR-TaNk\.nuget\packages\microsoft.aspnetcore.blazor.build\
3.0.0-preview6.19307.2\targets\../tools/Microsoft.AspNetCore.Blazor.Build.dll" 
write-boot-json "obj\Debug\netstandard2.0\Atrium.Client.dll" --references 
"e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\bootjson-references.txt" 
--embedded-resources 
"e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\embedded.resources.txt" 
--linker-enabled --output 
"e:\...\Atrium\src\Atrium.Client\obj\Debug\netstandard2.0\blazor\blazor.boot.json"" 
exited with code 1. [e:\...\Atrium\src\Atrium.Client\Atrium.Client.fsproj]
    0 Warning(s)
    2 Error(s)

Time Elapsed 00:00:09.70

Now what to do? Let's check out, how can I debug the problem. What are my tools (which IDE supports Bolero).

Visual Studio Settings No. 1

My personal preference is Visual Studio, but what I have seen in the FSharp Slack is mostly Visual Studio Code. At the download page of .NET Core:

Supports Visual Studio 2019 (v16.1, latest preview)

So let us download it. My internet connection was very slow at the moment, so I tried to minimalize the downloaded components:

Selected only .NET Core 3.0 SDK, F# language support, F# language support for web projects. Rest came with dependencies.

Tried to open the solution, and the following happened:

With the error:

E:\...\Atrium\src\Atrium.Server\Atrium.Server.fsproj : error  : Unrecognized Guid format.

Last time that Servers didn't load correctly, I had to restart Visual Studio in Administrator mode. That did not work this time.

When I Googled the problem, I found some articles:

https://stackoverflow.com/a/33813249
https://stackoverflow.com/a/54578428

• Click "Troubleshoot Program"
• Check "The program opens but doesn't display correctly"

After the "The program opens but doesn't display correctly", there was a menu where I could not choose anything useful to describe my problem. So I quit trying.

1. Browse to HKEY_CURRENT_USER\Software\Microsoft\Windows NT\CurrentVersion\AppCompatFlags\Layers
2. Delete the Visual Studio entry

It was obviously VS compatibility problem at first sight. There wasn't even a key entry in the regedit, so I Googled more. Most of the finds about compatibility issue question were about "after upgrading Windows" or "after upgrading Visual Studio", but I had no such precede.

• https://github.com/fsprojects/Paket/issues/3528

Ok. It is not Paket. Or is it? I am confused.

• https://github.com/dotnet/fsharp/issues/3393
• https://github.com/dotnet/fsharp/pull/3463/commits/1bceae4ec1791ccd18f07e584dafaa2b646e1d85

Maybe the Project's format didn't keep up with the latest. Went to https://www.guidgenerator.com/online-guid-generator.aspx. Checked Uppcase, braces and generated new GUID. Modified the e:\...\Atrium\src\Atrium.Server\Atrium.Server.fsproj like:

<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="Startup.fs" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\Atrium.Client\Atrium.Client.fsproj" />
    <PackageReference Include="Bolero.Server" Version="0.6.3-preview*" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.0-preview6.*" />
  </ItemGroup>
</Project>

to:

<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="Startup.fs" />
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\Atrium.Client\Atrium.Client.fsproj" >
      <Name>Atrium.Client</Name>
      <Project>{DA3D64BB-78FA-4241-9BD7-733D3C253630}</Project>
    </ProjectReference>
    <PackageReference Include="Bolero.Server" Version="0.6.3-preview*" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.0-preview6.*" />
  </ItemGroup>
</Project>

Now I can load the project. I Set as StartUp Project and tried to run. It pops up a screen with an exception and closes. With my lightning fast Ctrl - A, Ctrl - C, I could check the exception:

Application startup exception: System.IO.DirectoryNotFoundException: 
E:\...\Atrium\src\Atrium.Client\bin\Debug\netstandard2.0\dist\
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor
                           (String root, ExclusionFilters filters)
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root)
   at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.
   UseClientSideBlazorFiles(IApplicationBuilder app, String clientAssemblyFilePath)
   at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.
   UseClientSideBlazorFiles[TClientApp](IApplicationBuilder app)
   at Atrium.Server.Startup.Configure(IApplicationBuilder app, IWebHostEnvironment env) 
   in E:\todelete\Atrium\src\Atrium.Server\Startup.fs:line 71
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, 
   Signature sig, Boolean constructor, Boolean wrapExceptions)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, 
   BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at Microsoft.AspNetCore.Hosting.ConfigureBuilder.Invoke
   (Object instance, IApplicationBuilder builder)
   at Microsoft.AspNetCore.Hosting.ConfigureBuilder.
   <>c__DisplayClass4_0.<Build>b__0(IApplicationBuilder builder)
   at Microsoft.AspNetCore.Hosting.ConventionBasedStartup.Configure(IApplicationBuilder app)
   at Microsoft.AspNetCore.Mvc.Filters.MiddlewareFilterBuilderStartupFilter.
   <>c__DisplayClass0_0.<Configure>g__MiddlewareFilterBuilder|0(IApplicationBuilder builder)
   at Microsoft.AspNetCore.HostFilteringStartupFilter.
   <>c__DisplayClass0_0.<Configure>b__0(IApplicationBuilder app)
   at Microsoft.AspNetCore.Hosting.WebHost.BuildApplication()
crit: Microsoft.AspNetCore.Hosting.WebHost[6]
      Application startup exception
System.IO.DirectoryNotFoundException: 
   E:\...\Atrium\src\Atrium.Client\bin\Debug\netstandard2.0\dist\
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor
   (String root, ExclusionFilters filters)
   at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root)
   at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.
   UseClientSideBlazorFiles(IApplicationBuilder app, String clientAssemblyFilePath)
   at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.
   UseClientSideBlazorFiles[TClientApp](IApplicationBuilder app)
   at Atrium.Server.Startup.Configure(IApplicationBuilder app, IWebHostEnvironment env) 
   in E:\todelete\Atrium\src\Atrium.Server\Startup.fs:line 71
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, 
   Signature sig, Boolean constructor, Boolean wrapExceptions)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, 
   Binder binder, Object[] parameters, CultureInfo culture)
   at Microsoft.AspNetCore.Hosting.ConfigureBuilder.Invoke
   (Object instance, IApplicationBuilder builder)
   at Microsoft.AspNetCore.Hosting.ConfigureBuilder.
   <>c__DisplayClass4_0.<Build>b__0(IApplicationBuilder builder)
   at Microsoft.AspNetCore.Hosting.ConventionBasedStartup.Configure(IApplicationBuilder app)
   at Microsoft.AspNetCore.Mvc.Filters.MiddlewareFilterBuilderStartupFilter.
   <>c__DisplayClass0_0.<Configure>g__MiddlewareFilterBuilder|0(IApplicationBuilder builder)
   at Microsoft.AspNetCore.HostFilteringStartupFilter.
   <>c__DisplayClass0_0.<Configure>b__0(IApplicationBuilder app)
   at Microsoft.AspNetCore.Hosting.WebHost.BuildApplication()

So I have to download .netcore 2? That version did not have an installer with .exe extension. So I tried the latest 2. available 2.2. It did not solve my problem. I even tried to write:

<TargetFramework>netcoreapp2.2</TargetFramework>

in E:\...\Atrium\src\Atrium.Server\Atrium.Server.fsproj.

1>C:\Program Files\dotnet\sdk\3.0.100-preview9-014004\Sdks\Microsoft.NET.Sdk\
targets\Microsoft.PackageDependencyResolution.targets(234,5): error NETSDK1005: 
Assets file 'E:\...\Atrium\src\Atrium.Server\obj\project.assets.json' 
doesn't have a target for '.NETCoreApp,Version=v2.2'. 
Ensure that restore has run and that you have included 'netcoreapp2.2' 
in the TargetFrameworks for your project.

after checking E:\...\Atrium\src\Atrium.Server\obj\project.assets.json, I did not find anything related that it should be compiled with 2.2. Then tried to build the Atrium.Client project.

Could not load type 'System.Text.Json.Serialization.JsonSerializerOptions' 
from assembly 'System.Text.Json, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=cc7b13ffcd2ddd51

That is the same error as the dotnet command's error way back there. Later, somehow I bumped into the following post:

• https://www.hanselman.com/blog/SystemTextJsonAndNewBuiltinJSONSupportInNETCore.aspx

Highlighting the following:

Quote:

ASP.NET in .NET Core 3.0 removes the JSON.NET dependency but still allows you to add it back in a single line if you'd like.

For adding it back (and post a change request for the maintainers of Bolero), I had to somehow load the project and add the nuget. But still, I had so much yellow triangulated nuget references,

So let us try another approach.

Visual Studio Code settings

I downloaded Visual Studio Code Insiders and use Ionide. Using Code and Ionide is another hint from F# community from Slack. I hoped for some project like structure, but all I could get was Open folder.... I quickly installed the Vim keyboard settings, and shortcuts. After installing Ionide-fsharp, the following menu was active after opening E:\...\Atrium.

Perfect! Now Debug the project:

Exception has occurred: CLR/System.ArgumentException

An exception of type 'System.ArgumentException' occurred in System.IO.FileSystem.Watcher.dll 
but was not handled in user code: 'The directory name 
'c:\...\Atrium\src\Atrium.Server\bin\Debug\Atrium.Client' does not exist.'

at System.IO.FileSystemWatcher.CheckPathValidity(String path)
at System.IO.FileSystemWatcher..ctor(String path, String filter)
at Bolero.Templating.Server.Impl.Watcher.Start() at 
Bolero.Templating.Server.ServerTemplatingExtensions.UseHotReload
(IApplicationBuilder this, FSharpOption`1 urlPath)
at Atrium.Server.Startup.Configure(IApplicationBuilder app, IWebHostEnvironment env) 
in c:\Marci cuccok\Atrium\src\Atrium.Server\Startup.fs:line 75
at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, 
Signature sig, Boolean constructor, Boolean wrapExceptions)
at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, 
Binder binder, Object[] parameters, CultureInfo culture)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.Invoke(Object instance, 
IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.<>c__DisplayClass4_0.
<Build>b__0(IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.ConventionBasedStartup.Configure(IApplicationBuilder app)

Some time later, I upgraded to Bolero 0.8. I went through the installation steps, and redownloaded the latest .NET Core 3.0 SDK, and the project. Checking dotnet build, there were no exceptions, and the Server started. So it was the JSON braking change. Also after some time, I picked up on the gif that shows the hot reload feature:

Which was a Visual Studio non code for sure.

Visual Studio Settings No. 2

I tried to peek on the gif if I can see which Visual Studio version does Loïc use (Community/Pro/Enterprise) but could not guess. I believed Bolero is using some feature that only non-Community Visual Studio have.

After updating the Bolero repo, a new exception started to appear:

C:\Program Files\dotnet\sdk\3.0.100-preview8-013656\Sdks\Microsoft.NET.Sdk\
targets\Microsoft.PackageDependencyResolution.targets(234,5): 
error NETSDK1004: Assets file 'E:\...\Atrium\src\Atrium.Server\obj\project.assets.json' 
not found. Run a NuGet package restore to generate this file.

Running E:\...\Atrium\dotnet restore even other exception appeared:

A fatal error has occurred and debugging needs to be terminated. The 
debugger was configured to use the Desktop CLR (.NET Framework) 
Managed debugger, but the target process loaded the CoreCLR (.NET 
Core) runtime. To debug this project, configure it to use the 'Managed 
(CoreCLR)' debugger.

Googling the exception, the hint was the following:

• https://social.msdn.microsoft.com/Forums/en-US/59f880f7-ed60-4842-bc55-a9400971c58b/problem-debugging-net-core?forum=vsdebug

Quote:

Hi MrGoodkat47,

Sorry for delay in reply.

Since some errors might be caused by several situations, so sometimes we need to troubleshoot it manually, sorry for this inconvenience.

And for this error, please confirm if the corresponding .Net Core Runtime has been installed on your machine.

In addition, please go to Project Properties|Debug, then enable "Enable native code debugging".

But I do not have such a thing:

Searching through the internet, how to enable this managed CoreCLR, the following link helped me to start the debugger:

• https://stackoverflow.com/a/59891849

Following the hint, I could attach the debugger to a running server.

Note that the Start button does not use this method. I have to start the debugger attached to the running server which is run by E:\...\Atrium\src\Atrium.Server\dotnet run.

The final solution came from this Stackoverflow answer:

• https://stackoverflow.com/a/56672195

Quote:

I also added the following VS Workloads:

• ASP.NET and web development

After installing the web development, the netcoreapp2.2 came automatically. I could undo all my project file changes and redownload the empty project. Everything is working perfectly from template (much newer Visual Studio):

Also Enable native code debugging is available (notice, that the Visual Studio is newer than the MSDN post screen shot, and there are more options. The development is great):

I can debug the Server calls. Run my application with F5. Everything is fine.

Revisiting the Newest Version

After installing .NET 5.0.100-rc.1.20452.10 and Bolero 0.15.23 and Visual Studio Community 2019 16.7.5, I checked out what would happen if I remove the ASP.NET and web development feature (newest version at that moment). I could debug the Server calls without the 3 GB added set (which can definitely make your life easier if you choose to download).

Points of Interest

For the peeps right there, who like to jump into the new tech, and are not afraid to get their hands dirty.

History

• 2^nd October, 2020: Initial version