Introduction to Web Programming in F# with Giraffe — Part 2

dotnet new console -lang F#

After a few seconds, the ionide extension will spring to life. When it does, add the following NuGet packages from the terminal:

dotnet add package Giraffe -v 5.0.0-rc-6

open Program.fs and replace the code with the code from this gist:

https://gist.github.com/ianrussellsoftwarepark/8b02b1e07c65e956d921eac882d08f2b

Running the Sample Code

In the Terminal, type the following to run the project:

dotnet run

Go to your browser and type in the following Url:

https://localhost:5001

You should see some text.

Now try the following Uri and you should see some Json returned:

https://localhost:5001/api

You will need a tool to run HTTP calls (GET, POST, PUT, and DELETE). I use Postman but any tool including those available in the IDEs will work.

Our Task

We are going to create a simple API that we can view, create, update and delete Todo items.

Data

Rather than work against a real data store, we are going to create a simple store with a dictionary and use that in our handlers.

Create a new file above Program.fs called TodoStore.fs and add the following code to it:

module Todos

open System
open System.Collections.Concurrent

type TodoId = Guid

type NewTodo = {
    Description: string
}

type Todo = {
    Id: TodoId
    Description: string
    Created: DateTime
    IsCompleted: bool
}

type TodoStore() =
    let data = ConcurrentDictionary()

    member _.Create todo = data.TryAdd(todo.Id, todo)
    member _.Update todo = data.TryUpdate(todo.Id, todo, data.[todo.Id])
    member _.Delete id = data.TryRemove id
    member _.Get id = data.[id]
    member _.GetAll () = data.ToArray()

This is not production code. TodoStore is a simple class type that wraps a concurrent dictionary that we can test our API out with. It will not persist between runs. To plug it in, we need to make a change to configureServices in Program.fs:

let configureServices (services : IServiceCollection) =
    services.AddGiraffe()
            .AddSingleton(TodoStore()) |> ignore

let webApp =
    choose [
        GET >=> route "/" >=> htmlView todoView
        subRoute "/api"
            (choose [
                GET >=> route "" >=> json { Response = "ToDo List API" }
                GET >=> routef "/%s" sayHelloNameHandler
            ])
        setStatusCode 404 >=> text "Not Found"
    ]

GET /api/todo // Get a list of todos
GET /api/todo/id // Get one todo
PUT /api/todo // Create a todo
POST /api/todo // Update a todo
DELETE /api/todo/id // Delerte a todo

Let's create our routes with the correct HTTP verbs:

let apiTodoRoutes : HttpHandler =
    subRoute "/todo"
        (choose [
            GET >=> choose [
                routef "/%O" Handlers.viewTaskHandler
                route "" >=> Handlers.viewTasksHandler
            ]
            POST >=> route "" >=> Handlers.updateTaskHandler
            PUT >=> route "" >=> Handlers.createTaskHandler
            DELETE >=> routef "/%O" Handlers.deleteTaskHandler
        ])

let webApp =
    choose [
        GET >=> route "/" >=> htmlView todoView
        subRoute "/api"
            (choose [
                apiTodoRoutes
                GET >=> route "" >=> json { Response = "ToDo List API" }
                GET >=> routef "/%s" Handlers.sayHelloNameHandler
            ])
        setStatusCode 404 >=> text "Not Found"
    ]

Our todo routes live under the api subroute. We need to put the apiTodoRoutes route handler before the existing ones because the sayHelloNameHandler will be selected instead of our GET /api/todos route and return:

module Handlers =
    let sayHelloNameHandler (name:string) =
        fun (next : HttpFunc) (ctx : HttpContext) ->
            task {
                let msg = sprintf "Hello, %s" name
                return! json { Response = msg } next ctx
            }

Let's add the GET routes to our module:

let viewTasksHandler =
    fun (next : HttpFunc) (ctx : HttpContext) ->
        task {
            let store = ctx.GetService()
            let todos = store.GetAll()
            return! json todos next ctx
        }

let viewTaskHandler (id:Guid) =
    fun (next : HttpFunc) (ctx : HttpContext) ->
        task {
            let store = ctx.GetService()
            let todo = store.Get(id)
            return! json todo next ctx
        }

let createTaskHandler =
    fun (next : HttpFunc) (ctx : HttpContext) ->
        task {
            let! newTodo = ctx.BindJsonAsync()
            let store = ctx.GetService()
            let created = store.Create({ Id = Guid.NewGuid(); Description = newTodo.Description; Created = DateTime.UtcNow; IsCompleted = false })
            return! json created next ctx
        }

let updateTaskHandler =
    fun (next : HttpFunc) (ctx : HttpContext) ->
        task {
            let! todo = ctx.BindJsonAsync()
            let store = ctx.GetService()
            let created = store.Update(todo)
            return! json created next ctx
        }

let deleteTaskHandler (id:Guid) =
    fun (next : HttpFunc) (ctx : HttpContext) ->
        task {
            let store = ctx.GetService()
            let existing = store.Get(id)
            let deleted = store.Delete(KeyValuePair(id, existing))
            return! json deleted next ctx
        }

You will receive a reponse of true. If you now call the list again, you will receive a json response like this: