The goal will be to make a very simple hello world mobile app. There are a couple steps to get there, none of which are too complicated. To follow along, you will need the following prerequisites. Make sure you have .NET Core and NodeJs installed. Next, Cordova must be installed:
npm install -g cordova. Now that the building blocks are installed, it is time to get started.
First, the Cordova project will be created and initialized with the supported platforms.
browser is useful for the development process, while
android is the real target. If you’re of an iOS leaning, it can be the mobile target instead, or as an addition.
cordova create HelloWorld
dotnet new console -lang F# -n App
npm install fable-compiler --save
Third, it is time to wire the projects together, which is where webpack enters the picture. The Fable sample project already uses webpack, the config just needs some adjustments in order to publish the results to cordova (instead of a website).
npm install webpack --save
In the main project directory, webpack needs a config file
webpack.config.js file with the following contents. This tells webpack to process the newly create F# app project, and use the fable-loader to process files. The destination bundle file generated is placed in Cordova’s
var path = require("path");
The project directory should look something like this:
Now that the main project structures have been put into place, it is time to put the code together. The Cordova project needs to be able to consume the generated Fable bundle created by webpack. This is done by editing the Cordova index page
www/index.html. The contents can be reduced to below. The key points here are the
elmish-app div and the
Cordova is set to accept some Fable code, now it is time to get to the F#. The contents of
App/Program.fs are below. Since this is about wiring Fable to Cordova I don’t want to spend too much time on the specific F# code. But the code takes a person’s name as input and replies with a Hello message. To add a bit of mobile flavor, it also tracks current acceleration of the device using the
devicemotion event, and publishes that to the screen as well.
All that is left now is to build and run the app. There are a couple things to keep track of: building the Fable app with webpack, running the app in the browser for development, and building. The commands below touch the surface of development and building, but they at least get you started.
# Run webpack on the fable app
A running app looks like this:
Being able to build is great, but development can be cumbersome without the ability to watch and auto-build file changes. Taking the next step, let’s add some convenience to the process. Add the following to
The above command is just the interface, it needs some modifications to
webpack.config.js to perform the desired actions. The below changes wire into the
afterEmit hook to refresh the cordova browser (and start the local service if not already started). The
watchOptions aren’t strictly needed for this, but it helps to stop rebuild spamming, and lower file watch needs. These values can be tuned more for specific needs.
const exec = require("child_process").exec;
Now, a simple
npm run watch will start the Cordova browser, watch for application updates, and auto-build as files are edited. The development process just got way easier. As a reminder, this is just a sample; more goes into properly building everything out. With that said, this provides a good starting point to getting F# running on mobile using Cordova. I hope you found this useful and/or interesting. Until next time…