Awesome

Feliz with Hawaii & PetStore

This is a sample application that shows how to use Feliz with a client generated by Hawaii to connect to the PetStore API and render data on the screen.

This is how the code looks like:

type Components =
    [<ReactComponent>]
    static member PetStore() =
        let petStore = PetStoreClient("https://petstore3.swagger.io/api/v3")
        let data = React.useDeferred(petStore.findPetsByStatus(status="available"), [| |])
        match data with
        | Deferred.HasNotStartedYet -> Html.none
        | Deferred.InProgress -> Html.h1 "Loading"
        | Deferred.Failed error -> Html.span error.Message
        | Deferred.Resolved response ->
            match response with
            | FindPetsByStatus.BadRequest ->
                Html.h1 "Bad request :/"
            | FindPetsByStatus.OK pets ->
                Html.ul [ for pet in pets -> Html.li pet.name ]

This template gets you up and running with a simple web app using Fable, Elmish and Feliz.

Requirements

• dotnet SDK 2.0.0 or higher
• node.js 10.0.0 or higher

Editor

To write and edit your code, you can use either VS Code + Ionide, Emacs with fsharp-mode, Rider or Visual Studio.

Development

Before doing anything, start with installing npm dependencies using npm install.

Then to start development mode with hot module reloading, run:

npm start

This will start the development server after compiling the project, once it is finished, navigate to http://localhost:8080 to view the application .

To build the application and make ready for production:

npm run build

This command builds the application and puts the generated files into the deploy directory (can be overwritten in webpack.config.js).

Tests

The template includes a test project that ready to go which you can either run in the browser in watch mode or run in the console using node.js and mocha. To run the tests in watch mode:

npm run test:live

This command starts a development server for the test application and makes it available at http://localhost:8085.

To run the tests using the command line and of course in your CI server, you have to use the mocha test runner which doesn't use the browser but instead runs the code using node.js:

npm test