Fullstack Template using F# and Fable

This repository contains a minimal SAFE-style template for creating a fullstack F# project using Fable, Fable.Remoting and Saturn.

To get started with a new project, click the Use this template button to create a new repository from this template, and check out the docs on using templates.

Requirements

• Dotnet SDK 7.0 or higher
• Node.js 16 or higher
• An F# editor like Visual Studio, Visual Studio Code with Ionide or JetBrains Rider

Or you can use the VS Code Remote Container for development, as it will set up all the required dependencies.

Features

Server

• Saturn web server
• Fable.Remoting for client-server communication
• Logging with Serilog

Client

• Fable for F# to JavaScript compilation
• RPC routing with Fable.Remoting
• Styling with Fluent UI
• Shared client-server types

Build

To concurrently run the server and client in watch mode use the following command in the build script:

dotnet run

Run server and compile frontend manually

# For Server
cd src/Server && dotnet run

# For Client
pnpm install .
dotnet tool restore
dotnet fable watch -s -o .build --run vite -c ../../vite.config.js

The backend server will default to port 8085.

To access the frontend navigate to http://localhost:8080/ in your preferred browser.

To build the server and client in release mode use the following command:

dotnet run bundle

Nix

This template also includes a Nix shell file with direnv for development. To use it, simply run direnv allow in the root of the project. This will install all the dependencies and set up the environment for you.