An Elmish F# Fable template which uses Tailwind for styling, the Vite bundler, the Vitest test runner and Storybook for Component-Driven Development (CDD).
- Uses Fable.Remoting with Saturn
- Inspired by RedwoodJS File Structure
You'll need to install the following pre-requisites in order to use the Fable Starter template:
Use degit to set up the template:
npx degit rastreus/FableStarter <your project name>Run the following commands from the root of the project directory:
-
cd <your project name> -
dotnet tool restore -
dotnet paket install -
yarn install -
dotnet build shared/src/Shared.fsproj -
dotnet build api/src/Api./fsproj -
dotnet run --project api/src/Api.fsproj -
yarn dev:fable -
Open a brower to
http://localhost:5173
Tests can be run by Vitest in its watch mode. Open a separate terminal instance and run yarn test.
Check out Fable.Expect to learn more about defining tests.
More testing resources:
Similar to tests, Storybook can run in its watch mode in a separate terminal instance with yarn storybook.
Check out the Storybook Docs and their Storybook for React tutorial to learn more about writing stories for components.
If this template isn't what you're wanting, there are other templates. Some only set up a frontend Fable project and then others are full-stack web app templates that include a F# backend:
- MangelMaxime/template-gitpod-fable-3-vite-react
- fable-compiler/fable-templates
- albertwoo/FablePlayground
- Bjorn-Strom/elmish-fss-template
- SAFE-Stack/SAFE-template
- Zaid-Ajaj/SAFE.React
- Dzoukr/SAFEr.Template
Additional templates can be found at https://fable.io/resources.html#Templates