Webgear server + Halogen client

The Webgear realworld Haskell example (server) and the Real World Halogen Purescript example (client) combined into Conduit (gothinkster/realworld) — what's described as "The mother of all demo apps" (fullstack Medium.com clone)

Introduction

At the server Haskell is used (i.e. Webgear) and at the client PureScript (i.e. Halogen). The Conduit (gothinkster/realworld) examples for Webgear and Halogen are used at respectively the server and client. The ember.js client in the Webgear example is replaced with the Halogen client.

A folder is created for the project (in which client and server subdirectories will be created, further on in this text).

1mkdir webgearhalogen

Nix prerequisite

You'll need to have Nix installed, per instructions here.

Client (Halogen Purescript)

The thomashoneyman/purescript-halogen-realworld example is cloned into a client subdirectory.

1git clone https://github.com/thomashoneyman/purescript-halogen-realworld client

As per instructions in README.md a development shell is started and JavaScript dependencies are installed.

1cd webgearhalogen/client
2nix develop
3npm install

The baseUrl is changed in the src/Main.purs file, so that localhost is served.

src/Main.purs

1let
2  -- baseUrl = BaseURL "https://api.realworld.io"
3  baseUrl = BaseURL ""
4  logLevel = Dev

Now the PureScript code is compiled to JavaScript code (producing a dist/main.js file).

Change the dist/index.html file to refer to the ui/assets/main.js location.

 1<html>
 2  <head>
 3    <meta charset="utf-8" />
 4    <meta name="viewport" content="width=device-width, initial-scale=1" />
 5    <title>Conduit</title>
 6    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
 7    <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css" />
 8    <link rel="stylesheet" href="//demo.productionready.io/main.css" />
 9  </head>
10  <body>
11    <script src="ui/assets/main.js"></script>
12  </body>
13</html>

Compile the client and exit the client development shell.

1npm run bundle
2exit

Server (Webgear Haskell)

The webgear-example-realworld example is cloned into a server subdirectory (hence a sibling of the client subdirectory).

1git clone https://github.com/haskell-webgear/webgear-example-realworld server

Delete ui/index.html and clear the ui/assets subdirectory. Create symlinks to the Halogen files.

 1cd webgearhalogen/server
 2
 3cd ui
 4rm index.html
 5ln -s ../../client/dist/index.html
 6
 7rm -rf assets
 8mkdir assets
 9cd assets
10ln -s ../../../client/dist/main.js

Start the server

Configure server

Add hsPkgs.ghcid to server/flake.nix. Also beware that the nix develop command may take a while to complete and uses lots of memory — this can be greatly reduced by commenting out pkgs.haskell-language-server in flake.nix prior to running nix develop.

flake.nix

 1devShells.default = hsPkgs.shellFor {
 2  name = pkgName;
 3  packages = pkgs: [ pkgs.${pkgName} ];
 4  buildInputs = [
 5    pkgs.cabal-install
 6    pkgs.cabal2nix
 7    hsPkgs.fourmolu
 8    hsPkgs.ghc
 9    pkgs.hlint
10    # pkgs.haskell-language-server
11    hsPkgs.ghcid
12 ];
13 src = null;
14};

Change server/webgear-example-realworld.cabal to comment out -Wunused-packages. in ghc-options, because ghcid doesn't like it.

webgear-example-realworld.cabal

 1ghc-options:        -threaded
 2                      -rtsopts
 3                      -with-rtsopts=-N
 4                      -Wall
 5                      -Wno-unticked-promoted-constructors
 6                      -Wcompat
 7                      -Widentities
 8                      -Wincomplete-record-updates
 9                      -Wincomplete-uni-patterns
10                      -Wmissing-fields
11                      -Wmissing-home-modules
12                      -Wmissing-deriving-strategies
13                      -Wpartial-fields
14                      -Wredundant-constraints
15                      -- -Wunused-packages
16                      -Werror
17                      -fshow-warning-groups

Start the server

cd webgearhalogen/server
nix develop
ghcid -c 'cabal repl' -T Main.main --restart=./webgear-example-realworld.cabal

Navigate to site

Navigate to your site at http://localhost:3000, where one of the already precreated logins can be used (also see the Webgear realworld example documentation).

  • Email: `arya@winterfell.com` Password: `valar_morghulis`
  • Email: `jon@winterfell.com` Password: `winter_is_coming`

Posts in this Series