Learning F# through hands-on

In this exercise you'll learn some F# through modifying and extending a web app (both client and server), and doing a little scripting.

Install pre-requisites

You'll need to install the following pre-requisites in order to build SAFE applications

• .NET SDK check the version defined in [global.json]
• Node LTS

You can use any editor, for this exercise we recommend

• VS Code, plus
• The F# Extension for VS Code called Ionide (you will be prompted automatically in VS Code later to install this)

Starting the dojo

Clone:

git clone https://github.com/dsyme/guido-learns-fsharp
cd guido-learns-fsharp

Before you run the project for the first time only you must install dotnet "local tools" with this command:

dotnet tool restore

Open the editor:

code .

Build and run in watch mode use the following command:

dotnet run

You may have to allow dotnet or Server access to your public and/or private network.

Now open http://localhost:8080 in your browser. Arrange the windows so you can see both Code editor and a reduced web browser.

Use the app

Type a Dutch postcode into the web app, e.g. "1011".

Note the app is a bit thin and has an obvious mistake:

This should say "2nd Stop", likewise for "3rd stop" and so on. Your first task will be to fix this.

Completing the tasks

Search files (Ctrl+Shift+F or Edit --> Find in Files) and search through for "TASK 1" to start completing the Dojo.

You will see

Task 1.1
Task 1.2 

and so on. The first task is in src/Client/Index.fs.

Each task is explained in in general they are independently solvable.

Going further: bundling your app

There is Bundle to package your app:

dotnet run -- Bundle

Going further: deploying to Azure

This requires these prerequisites:

• Azure CLI

First time run

az login

Then set the name of your app in Build.fs:

    let web = webApp {
        name "feiew02"  // set the name of your app here
    ...

To deploy to Azure:

dotnet run -- Azure 

Resources

• Learning F#
• SAFE documentation
• Fable
• Elmish