Getting started with Fable


Photo by Ilija Boshkov on Unsplash

As a developer I’m always eager to learn new technologies, practices and languages. Currently very interested in expanding my expertise in the functional programming. So at some point I’ve decided to learn functional language, not just functional patterns which can be used in the JavaScript. I’ve a .NET background and taking into account this background I’ve decided to learn F#.

The most important problem for me was that in general it’s quite hard to apply F# knowledge in front-end development. But recently I’ve heard about Fable and was very excited about it. The idea of Fable is similar to any other transpiler on the market (like Babel or TypeScript). You are writing the code using the language you love and transpiler transforms it into JavaScript (the most hated language nowadays).

So, now my goal is to write fully-functional React application. As a starting point I’ll use some public API (like GItHub) or even stub data. But if everything goes well I’ll try to use Fable to compile some simple back-end on Node.js and MongoDB.

To make task a bit more interesting I’ll also do everything on Ubuntu (which was not even possible before .NET Core was released).

So if you want to follow my path let’s go. The first thing you need to do is to install Node.js and Yarn (for most recent versions you can visit official sites) by using this shell script:

# Install curl
sudo apt-get update
sudo apt-get install curl
# Install Node.js
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash –
sudo apt-get install -y nodejs
# Install Yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add –
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc
view raw install-node.sh hosted with ❤ by GitHub
Installing Node.js and Yarn

Now let’s install important development tools: git and .NET Core SDK:

# Install git
sudo apt-get install git -y
git config –global user.name {{your_name}}
git config –global user.email {{your_email}}
# Install .NET SDK
wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2
view raw fable-sdk.sh hosted with ❤ by GitHub
Installing git and .NET Core SDK

!IMPORTANT! Currently .NET Core SDK is available as a snap package, but when I tried to use it I had issues with Ionide extension (language server for F# was not starting) for VS Code and as a result removed a snap package and installed as Debian package and it worked perfectly.

And of course, last but not least is development tools. For front-end developer in 2019 it is VS Code (personally I suggest to use Insiders preview) and Chrome (unfortunately Canary builds are not available on Linux):

# Install VS Code
curl https://packages.microsoft.com/keys/microsoft.asc | gpg –dearmor > microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt-get update
sudo apt-get install -y code-insiders
# Install Chrome
wget -q -O – https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add –
echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
view raw fable-dev-tools.sh hosted with ❤ by GitHub
Installing VS Code and Chrome

As a last step you need to setup you VS Code. To do so I’d recommend to read my post “VS Code for front-end developer” and also to be able to write code using F# efficiently you’ll need Ionide.

That’s basically it for today. In the next posts I’ll try to cover topics like project scaffolding and first components/services. If you have any questions or faced any issues during following this manual don’t hesitate to write in the comments below.

Also if you find this material useful don’t forget to subscribe and share it with your colleagues! Thanks!

5 thoughts on “Getting started with Fable

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s