Shows instance level example of p5.gibber using Fable.
- dotnet SDK 2.1 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 .NET dependencies:
mono .paket/paket.exe install - Start Webpack dev server:
npx webpack-dev-serverornpm 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.
Paket is a dependency manager for .NET and mono projects, which is designed to work well with NuGet packages and also enables referencing files directly from Git repositories or any HTTP resource. It enables precise and predictable control over what packages the projects within your application reference.
.NET dependencies are declared in paket.dependencies. The src/paket.references lists the libraries actually used in the project. Since you can have several F# projects, we could have different custom .paket files for each project.
Last but not least, in the .fsproj file you can find a new node: <Import Project="..\.paket\Paket.Restore.targets" /> which just tells the compiler to look for the referenced libraries information from the .paket/Paket.Restore.targets file.
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. Deployment uses Webpack to populate the deploy directory and then pushes that directory to gh-pages.
The index.html file and other assets like an icon can be found in the public folder.