Skip to content
/ FableStarter Public template

An Elmish F# Fable template that uses Tailwind for styling, the Vite bundler, the Vitest test runner and Storybook

License

Notifications You must be signed in to change notification settings

rastreus/FableStarter

Repository files navigation

FableStarter

Fable Logo

An Elmish F# Fable template which uses Tailwind for styling, the Vite bundler, the Vitest test runner and Storybook for Component-Driven Development (CDD).

Install pre-requisites

You'll need to install the following pre-requisites in order to use the Fable Starter template:

Getting Started with FableStarter

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:

  1. cd <your project name>

  2. dotnet tool restore

  3. dotnet paket install

  4. yarn install

  5. dotnet build shared/src/Shared.fsproj

  6. dotnet build api/src/Api./fsproj

  7. dotnet run --project api/src/Api.fsproj

  8. yarn dev:fable

  9. Open a brower to http://localhost:5173

Running Tests

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:

Running Storybook

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.


Other Templates

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:

Additional templates can be found at https://fable.io/resources.html#Templates

About

An Elmish F# Fable template that uses Tailwind for styling, the Vite bundler, the Vitest test runner and Storybook

Topics

Resources

License

Stars

Watchers

Forks