rastreus / fablestarter Goto Github PK

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

License: MIT License

F# 64.97% JavaScript 30.65% CSS 0.36% HTML 4.03%

fsharp fable elmish tailwindcss template vite vitest storybook

fablestarter's Introduction

FableStarter

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

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:

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

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

fablestarter's People

Contributors

Stargazers

Watchers

Forkers

darrix stjordanis

fablestarter's Issues

Have you tried working with Modal dialogs with CSS transitions?

Stumbled upon your repo hoping someone can point me on how to do this in F# Fable with TailWindCSS. I'm trying to create a modal dialog that uses the TailWindCSS class names, but it looks like it requires additional work to make it work?

Steps from the README don't work

After dotnet build:

 ~/Documents/FableStarter  main ?1 ▓▒░ dotnet build                                                                                                                              ░▒▓ ✔  19s  12:15:13 
Microsoft (R) Build Engine version 17.0.0+c9eb9dd64 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  Restored /Users/delneg/Documents/FableStarter/FableStarter.fsproj (in 3.01 sec).
/Users/delneg/Documents/FableStarter/src/App.fs(24,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'w-full'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(25,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'h-screen'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(26,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'bg-fable-blue-500'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(27,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'dark:bg-fable-blue-900'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(28,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'flex'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(29,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'flex-col'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(30,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'justify-center'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]
/Users/delneg/Documents/FableStarter/src/App.fs(31,16): error FS0039: The type 'CssClasses<./src/index.css,0,node,tailwind-process.js tailwind.config.js>' does not define the field, constructor or member 'items-center'. [/Users/delneg/Documents/FableStarter/FableStarter.fsproj]

Questiion about debugging :)

Hi! feel free to close the issue right away! I just hoped to get some tips on how to enable debugging in F# files with Vite and VsCode ;) Any hints?

rastreus / fablestarter Goto Github PK

fablestarter's Introduction

FableStarter

Install pre-requisites

Getting Started with FableStarter

Running Tests

Running Storybook

Other Templates

fablestarter's People

Contributors

Stargazers

Watchers

Forkers

fablestarter's Issues

Have you tried working with Modal dialogs with CSS transitions?

Steps from the README don't work

Questiion about debugging :)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent