My journey with F# in Astro (and why I'm giving up) + idea for .fastro files

[asieradzk]

Hey everyone,

I want to share my recent experience trying to use vite-plugin-fable with Astro for a secret side hustle I've been working on (ASP.NET Core backend with F# and ROP, Astro frontend).

The Honeymoon Phase

I started as an experiment - just installing the plugin and making the odd React component here and there. For SSR (build-time) components, they were comparable to .astro files and just offered some fun writing components without any drawbacks since Astro and Vite compiled them to pure HTML/CSS.

The real breakthrough was for client-side scripting. For the few interactive elements or build-time logic that required complex data transformations - F# was just so much more terse and clean. The compiler was helping me with every typo, every little thing as I attempted to make illegal states unrepresentable - like your average F# fanatic. This was the honeymoon stage and everything worked fantastically.

The scripts I wrote in F# were imported in my .astro components' <script> tags and worked perfectly with excellent bundle sizes because of Vite's bundling and tree-shaking.

Where Everything Fell Apart

After this experience, I decided to take it to the next level and rewrite the entire frontend as F# React components with odd scripts and very thin .astro wrappers for the pages themselves. This way I could accomplish type-safety project-wide and only have to sync/write .d.ts declarations for the F# React page → .astro page interface.

But that's where I really hit the wall - there was no reasonable way to decouple scripting, styling, and SSR with F# React components as it's done in Astro.

Essentially, you know how in Astro every page has SSR scripting, layout, script tag, and styling tag all in one file? For my F# approach, I'd have to write separate files for each of these and manually connect F# scripts to React components - because I would lose hydration. As I said before, the .astro <script> tag gets tree-shaken, and I ended up having scriptName.client.fs files that got separately imported in my .astro wrappers just to make that happen.

Needless to say, it was not possible to maintain type-safety there. I had to dynamically make imports inside these script files, otherwise they didn't work the intended way (not hydrated). And the whole idea fell apart.

I am now removing all the F# from my project. It was fun while it lasted and I learned a few things, but I can't convince myself to introduce extra noise unless I can use it the complete way...

A Wild Idea: .fastro files

With that said, I want to speculate about the possibility of writing an Astro plugin that would enable writing F# pages the intended Astro way. I have no idea how to even begin writing something like that, but I can envision how I want it to work.

A .fastro file would look something like:

---
// F# frontmatter - server-side code
module PageData =
    let title = "My F# Page"
    let posts = Database.getPosts() |> Async.RunSynchronously
    
type Props = {
    title: string
}

// Exports
let props = { title = PageData.title }
---

// HTML with F# expressions
<Layout title={props.title}>
    <h1>{props.title}</h1>
    <main>
        {posts |> List.map (fun post -> 
            <article key={post.id}>
                <h2>{post.title}</h2>
                <p>{post.excerpt}</p>
            </article>
        )}
        <Counter client:load />
    </main>
</Layout>

<script>
// F# client-side code
open Browser.Dom

let button = document.querySelector "button" :?> HTMLButtonElement
button.onclick <- fun _ ->
    console.log "Clicked from F#!"
</script>

<style>
/* Regular CSS */
h1 { color: navy; }
</style>

The Big Questions

Is this even possible? How would it work? I imagine it would need to:

• Use vite-plugin-fable under the hood
• Transpile .fastro → .astro + .js in some clever way
• Preserve Astro's hydration model

My biggest worry is IDE support. Would VS Code even know what to do with these files? Would we need a custom language server?

Has anyone else tried to deeply integrate F# with modern meta-frameworks like this? Am I crazy for even wanting this? 😅

I realize this might be a pipe dream, but the ergonomics of writing everything in F# were so good during that honeymoon phase that I can't help but wonder if there's a way to make it work properly.

[EmreAka]

just use typescript

[laurentpayot]

F# is an OCaml dialect, so you could also use ReScript or Melange to target JavaScript from an OCamel-ish language. But you would get the same Astro issues as with F#.

[nojaf]

Hello,

At some point, I've experimented with Fable in Astro. Mainly by having client-side React components: https://amplifyingfsharp.io/sessions/2024-04-12/
This worked, but was not on the level of integration you are after.

For your questions:

Use vite-plugin-fable under the hood

This is what I had: https://github.com/amplifying-fsharp/amplifying-fsharp.github.io/blob/6becdb6f6f3703b9d2587b8460676ff1cfce22f6/astro.config.mjs#L12-L40

Transpile .fastro → .astro + .js in some clever way

It might be possible, but you would need to parse that file format correctly. Then, you’d have to involve Fable and mix that compilation back into a valid Astro file. It sounds quite tricky, and the tooling could be challenging. F#/FASC isn't integrated with something like Volar, which means you’re looking at a lot of work to achieve a good experience.

Preserve Astro's hydration model

I recall that part being tricky; I don't believe I completely mastered it in my experiment.

If you still want to mix Astro and F#, I recommend keeping things separate. You can import an F# file into your Astro header component and create F# components in Astro that you can embed. This approach seems the most realistic. I understand the drawback here is that everything gets split into multiple files. To simplify CSS, you might consider using something like Tailwind or Daisy.