Getting started

What is Bolero?

Bolero is a set of free and open-source libraries and tools to write web applications in F#. With it, you can write fully dynamic client-side web applications from the comfort of a strongly-typed functional language, all with great performance.

Bolero is built on top of Blazor, which means it can run in one of two modes: either in WebAssembly directly in the browser, or on the server side with SignalR. It adds a lot of features designed specifically to work in F#:

• Elmish Model-View-Update architecture for a functional approach to reactive content.
• HTML-in-F# syntax inspired by WebSharper.UI and Fable.
• Alternatively, HTML templates with hot reloading provide a comfortable design experience.
• URL Routing the F# way, automatically matching URLs with F# union types.
• Easy Remoting with an ASP.NET Core server side.
• F#-specific optimizations: Bolero strips F# metadata from compiled assemblies, reducing the download size of the application.

Creating a project

You can develop Bolero applications on Windows, OSX or Linux. It only has one prerequisite: the .NET SDK, version 6.0.101 or newer.

The easiest way to get started is to use Bolero's dotnet template. To install it, run the following command:

dotnet new -i Bolero.Templates

Then, you can create a new Bolero application:

dotnet new bolero-app -o HelloWorld

This will create a new folder HelloWorld and create an application inside it. The template has additional options, described at its home page. You can run it with:

cd HelloWorld
dotnet run --project src/HelloWorld.Server

This will start the server and run the following minimal application at localhost:5000:

This sample application demonstrates 3 types of web applications:

1. A static web site - Home
2. A Client side only application - Counter
3. An application with Server side interaction- Download Data

Discovering the startup project

The solution you just created comprises two projects.

• src/HelloWorld.Client is the project that gets compiled to WebAssembly, and contains your client-side code.

  • Main.fs contains the main body of the page. This is where the meat of the application is: as you develop, you will mostly be coding here and in new files referenced from here.

  • wwwroot/ contains static content. In particular, index.html is the actual page that is served. It contains a script reference to blazor.webassembly.js, which in turn loads your application.

    If you want to add styles and images to your application, this is the folder to put them in.

  • Startup.fs sets up Blazor to get the application started. You will rarely need to touch it: essentially only to set up remoting, if you want to use it.

• src/HelloWorld.Server is an ASP.NET Core application that serves as the host. This project is optional: if you pass --server=false when creating the solution with dotnet new, then it will not be created. Note however that it is necessary for templating hot reloading and remoting.

  • Startup.fs, similarly to its client counterpart, sets up ASP.NET Core to get the server started.