Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Creating Static Web Apps With F# and Fable
Microsoft Azure profile imageAaron Powell
Aaron Powell forMicrosoft Azure

Posted on • Originally published ataaron-powell.com on

     

Creating Static Web Apps With F# and Fable

While I’ve donelots of stuff with F# over the years, it’s pretty much all centred around apps on the server. WithAzure 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 atFable. 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 threeGitHub repo templates. All the templates have a common Azure Function backend (using F#), usePaket for dependency management,Vite for bundling the JavaScript (I wanted to avoid webpack),Thoth.Fetch for calling the API and aVS Code Remote Container config to setup an F# environment. For the client, there’sFable,Feliz (a React DSL in F#) andElmish (a Model-View-Update pattern).

I’ve also included some instructions on deploying to SWA, as it’s a bit tricker than anormal 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 anAzure Static Web App projects using Fable, Paket and F# Azure Functions.

To get started, click theUse this template button to create a repository from this template, and check out theGitHub docs on using templates.

Running The Application

From within VS Code run theLaunch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.

It's recommended that you use aVS 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 modeExit 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 anAzure Static Web Apps projects using Feliz, Paket and F# Azure Functions.

To get started, click theUse this template button to create a repository from this template, and check out theGitHub docs on using templates.

Running The Application

From within VS Code run theLaunch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.

It's recommended that you use aVS 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 modeExit 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 anAzure Static Web Apps projects using Elmish + Fable, Paket and F# Azure Functions.

To get started, click theUse this template button to create a repository from this template, and check out theGitHub docs on using templates.

Running The Application

From within VS Code run theLaunch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.

It's recommended that you use aVS 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 modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Invent with purpose

Any language. Any platform.

More fromMicrosoft Azure

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp