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).

mkdir 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.

git 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.

cd webgearhalogen/client
nix develop
npm install

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

src/Main.purs

let
  -- baseUrl = BaseURL "https://api.realworld.io"
  baseUrl = BaseURL ""
  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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Conduit</title>
    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <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" />
    <link rel="stylesheet" href="//demo.productionready.io/main.css" />
  </head>
  <body>
    <script src="ui/assets/main.js"></script>
  </body>
</html>

Compile the client and exit the client development shell.

npm run bundle
exit

Server (Webgear Haskell)

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

git 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.

cd webgearhalogen/server

cd ui
rm index.html
ln -s ../../client/dist/index.html

rm -rf assets
mkdir assets
cd assets
ln -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

devShells.default = hsPkgs.shellFor {
  name = pkgName;
  packages = pkgs: [ pkgs.${pkgName} ];
  buildInputs = [
    pkgs.cabal-install
    pkgs.cabal2nix
    hsPkgs.fourmolu
    hsPkgs.ghc
    pkgs.hlint
    # pkgs.haskell-language-server
    hsPkgs.ghcid
 ];
 src = null;
};

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

webgear-example-realworld.cabal

ghc-options:        -threaded
                      -rtsopts
                      -with-rtsopts=-N
                      -Wall
                      -Wno-unticked-promoted-constructors
                      -Wcompat
                      -Widentities
                      -Wincomplete-record-updates
                      -Wincomplete-uni-patterns
                      -Wmissing-fields
                      -Wmissing-home-modules
                      -Wmissing-deriving-strategies
                      -Wpartial-fields
                      -Wredundant-constraints
                      -- -Wunused-packages
                      -Werror
                      -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`