If you stumble upon this code, please be aware that it is all stream of conciousness code created while learning F#, WebGL, and fiddling around with Github. This is about trying out things to see how they work and not about creating proper code. I'll probably be creating several libraries based on stuff I learned with this and the other learning repos though.
This is a simple Fable app which draws a grid into a canvas element.
- dotnet SDK 3.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 - 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.
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.