DEV Community

loading...
Cover image for Creating Static Web Apps With F# and Fable
Microsoft Azure

Creating Static Web Apps With F# and Fable

Aaron Powell
Hi, my name’s Aaron Powell and I’m a Cloud Developer Advocate (CDA) at Microsoft. My area of specialty is front-end web dev and .NET (especially F#), but I enjoy doing silly things with technology.
Originally published at aaron-powell.com on ・2 min read

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.

GitHub logo 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:

Once the repo is created from the terminal run:

$>
Enter fullscreen mode Exit fullscreen mode

GitHub logo 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:

Once the repo is created from the terminal run:

$>
Enter fullscreen mode Exit fullscreen mode

GitHub logo 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:

Once the repo is created from the terminal run:

Enter fullscreen mode Exit fullscreen mode

Discussion (0)