Fable Elmish Lit Tailwind

A template for getting started with F# & Fable for web development.

Prerequisites

• .NET 8 SDK
• Node.js 20 LTS

Getting Started

These commands will install the JavaScript and .NET dependencies. You only need to run these commands when you first start or when you update your dependencies.

npm install
dotnet tool restore
dotnet paket install

^ note that dotnet tool restore is only needed due to dotnet/sdk#37272

Everyday development

The below command starts the development server in watch mode.

npm run dev
# Note: To stop the dev server press Ctrl+C in the terminal

It starts 3 processes in parallel:

• Fable, the F# to JavaScript compiler, will watch your F# files and recompile them automatically into the build directory.
• Tailwind CSS provides a set of utility styles. In development mode, it will watch your code and recompile the CSS files as you add more classes.
• Vite, JavaScript build tooling and development server. It watches the build directory and reloads the pages when the JavaScript changes.

By default, it will start here.

Building for production

The below command builds and bundles your F# and CSS into minified JavaScript in the dist directory. Any files in the public directory are also copied to dist.

npm run build

Understanding the config files

The following configuration files are used to support this project:

• .editorconfig Provides configuration settings for Fantomas the F# code formatter.
• .gitignore Defines files that should be ignored by Git
• global.json Defines the required version of the .NET SDK.
• package.json Defines the JavaScript dependencies from npm and scripts started with the npm command.
• paket.dependencies Defines the .NET dependencies from NuGet. Paket centralizes version management for your .NET dependencies.
  • Note: The paket.lock file lists the resolved dependencies.
  • Note: Each fsproj needs a corresponding paket.references to select which dependencies are required for that project.
• tailwind.config.cjs Defines the Tailwind CSS compiler and plugin settings.
• tsconfig.json Defines TypeScript compiler settings.
• vite.config.ts Defines Vite's compiler and plugin settings.
• dotnet-tools.json Defines the .NET tools for this project.