This repository uses several branches:
- main: initial branch, project scaffolding
- 2-react: Simple Fable App with React
- 3-MVU-Html: Added Elmish MVU pattern, basic HTML view
- 4-Fulma: Added Fulma for Bulma CSS
- 5-CSS: Customize CSS usage for better user experience
- 6-ReactComponents: Added React components to pretify XML/JSON view
This is a small Fable app project so you can easily get started and add your own code easily in it.
- dotnet SDK 3.0 or higher
- node.js with npm
- An F# editor like Visual Studio, Visual Studio Code with Ionide or JetBrains Rider.
- Install JS dependencies:
npm install - Install F# dependencies:
npm start - After the first compilation is finished, in your browser open: http://localhost:8080/
Any modification you do to the F# code will be reflected in the web page after saving.
JS dependencies are declared in package.json, while package-lock.json is a lock file automatically generated.
Webpack is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Fable interacts with Webpack through the fable-loader. Configuration for Webpack is defined in the webpack.config.js file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the Fable webpack-config-template.
The sample only contains two F# files: the project (.fsproj) and a source file (.fs) in the src folder.
The index.html file and other assets like an icon can be found in the public folder.