While I’ve done lots of stuff with F# over the years, it’s pretty much all centred around apps on the server. With Azure Static Web Apps being a big area for myself these days I’ve been looking at the role that F# plays with it.
This led me to have a proper look at Fable. Fable is a F# to JavaScript compiler, meaning you can write F# code and have it compiled to JavaScript, which is then run in the browser (or in a Node.js/Electron/etc. but I’m focusing on the browser usage).
So, in an effort to make it easier to get started with Fable and Static Web Apps, I’ve put together three GitHub repo templates. All the templates have a common Azure Function backend (using F#), use Paket for dependency management, Vite for bundling the JavaScript (I wanted to avoid webpack), Thoth.Fetch for calling the API and a VS Code Remote Container config to setup an F# environment. For the client, there’s Fable, Feliz (a React DSL in F#) and Elmish (a Model-View-Update pattern).
I’ve also included some instructions on deploying to SWA, as it’s a bit tricker than a normal app.
Check out the templates, and let me know if there’s anything you’d like to see in them to make it easier to get started with F# and Static Web Apps.
aaronpowell
/
swa-fable-template
A template for creating F# Azure Static Web Apps, using Fable for the UI
Azure Static Web Apps Fable Template
This repository contains a template for creating an Azure Static Web App projects using Fable, Paket and F# Azure Functions.
To get started, click the Use this template button to create a repository from this template, and check out the GitHub docs on using templates.
Running The Application
From within VS Code run the Launch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.
It's recommended that you use a VS Code Remote Container for development, as it will setup all the required dependencies and VS Code extensions.
Manual Environment Setup
If you don't wish to use a VS Code Remote Container you will need the following dependencies installed:
- .NET SDK 3.1
- Node.js 14
- Azure Static Web Apps CLI
- Azure Function Core Tools
Once the repo is created from the terminal run:
$>…
aaronpowell
/
swa-feliz-template
A GitHub repo template for creating Fable + Feliz apps for Azure Static Web Apps
Azure Static Web Apps Feliz Template
This repository contains a template for creating an Azure Static Web Apps projects using Feliz, Paket and F# Azure Functions.
To get started, click the Use this template button to create a repository from this template, and check out the GitHub docs on using templates.
Running The Application
From within VS Code run the Launch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.
It's recommended that you use a VS Code Remote Container for development, as it will setup all the required dependencies and VS Code extensions.
Manual Environment Setup
If you don't wish to use a VS Code Remote Container you will need the following dependencies installed:
- .NET SDK 3.1
- Node.js 14
- Azure Static Web Apps CLI
- Azure Function Core Tools
Once the repo is created from the terminal run:
$>…
aaronpowell
/
swa-elmish-template
A GitHub repo template for Elmish apps for Azure Static Web Apps
Azure Static Web Apps Elmish Template
This repository contains a template for creating an Azure Static Web Apps projects using Elmish + Fable, Paket and F# Azure Functions.
To get started, click the Use this template button to create a repository from this template, and check out the GitHub docs on using templates.
Running The Application
From within VS Code run the Launch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.
It's recommended that you use a VS Code Remote Container for development, as it will setup all the required dependencies and VS Code extensions.
Manual Environment Setup
If you don't wish to use a VS Code Remote Container you will need the following dependencies installed:
- .NET SDK 3.1
- Node.js 14
- Azure Static Web Apps CLI
- Azure Function Core Tools
Once the repo is created from the terminal run:
Top comments (0)