Fable + Preact.js + Serverless

Fable SPA deployed to Azure functions.

• The static content is all stored in the function app and served from it
• Gives an example of how the domain can be shared between both front end and back end
• Gives an example of how to post json to the server and wait for it to come back
• Shows the non-blocking UI
• Shows how hashing can be incorporated in the build pipeline

There are 3 x Projects:

SharedDomain

Contains a simple User type that used on front end and the back end. Makes use of Thoth.Json & Thoth.Json.Net.

FableApp

Fable App using preact.js for dom rendering & Thoth.Fetch for Fetch API.

Makes use of HtmlWebpackPlugin & CleanWebpackPlugin for hashing of bundle.js

One thing to note is never open Fable.Core.JS as it does not play nicely with System, Promise etc.

FunctionApp

2 x Function end points: 1 for static content, the other for json.

Makes use of .fsproj globbing

Install the Azure Functions Core Tools package

npm install -g azure-functions-core-tools

Build the project with

dotnet fsi build.fsx

Or build the FableApp project first dotnet build src; npm run-script build, followed by the FunctionApp project.

Run the serverless functions locally with

cd FunctionApp; func start

Build + Run

Build and start the function app running locally in one go

dotnet fsi run.fsx

Deploy to Azure Functions 😆 live app here