FrankBro / fable-compiler.github.io

The Fable web site. Automatically generated from "docs" folder in Fable.

Fable website generator

This project generates the static web pages for Fable website using several resources, among them:

• Markdown docs in Fable repo
• Samples in samples-browser repo
• React components built with Fable.React
• Handlebars templates

The F# project in src is compiled to a node app using Fable and then executed to generate the static pages. To run app the app in development mode (with live reload of the server whenever F# sources change) run the following commands.

Requirements are the same as for other Fable projects. yarn is used as the JS package manager.

Install JS and F# dependencies (only first time or whenever dependencies change):

yarn install
dotnet restore src

To execute Fable in watch mode (fable-splitter is used as the JS client), run:

cd src
dotnet fable yarn-start

If you only want to build the node app and run it once, type dotnet fable yarn-build instead.

The web pages will be output to public directory. To start a local server with live reloading capabilities to visualize them, in a new terminal, type:

yarn run server

The web uses a customized version of the Bulma CSS framework. The SASS file for the customization can be found in files/styles.sass. To compile it to CSS use:

yarn run sass -- -w

The -w argument activates the watch mode of the SASS compiler. You can omit it if you only want to compile the file once.

Alternatively, you can run the following to run the three processes (Fable, server and SASS compiler) at once concurrently:

yarn run start-all

Other repositories

At the moment, the tool expects the Fable and samples-browser repositories to be cloned on the same directory level as this one. In the future it'll be possible to change that behaviour through arguments.