p5js is a javascript implementation of Processing. Because it is javascript, we can use it with Fable. In this case, I tried ts2fable on some typescript definition files of p5js to create a Fable foreign interface. Now we have static type checking for our p5js bindings!
- 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-server
ornpm 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.