How to get from `pulp init` to running code in browser?

Question

I have success on getting pulp's helloworld purescript running via nodejs with following command sequences:

$ pulp init
...

$ pulp run
* Building project in /data/works/beta_projects/js_games/processing/hello-ps
* Build successful.
Hello sailor!

Next, I want to make the Hello sailor! message in the browser in the body text by injecting it in the div inner text

<html>
  <body>
    <div id="output" />
  </body>
</html>

What are steps I need to do?

I try pulp server command and got the blank page at http://localhost:1337/ without the need to provide index.html and there is no any message in console.

There is pulp browserify command that prints out the javascript which I expect to be included in the index.html's script tag but I don't know where I need to put index.html file.

score 6 · Accepted Answer · answered Sep 26 '17 at 10:20

I'm just starting out with PureScript, so there is definitely a better answer, but this works.

Create the index.html in the root folder and add:

<!doctype html>
<html>
  <body>    
    <script src="/jquery-3.2.1.min.js"></script>
    <script src="/app.js"></script>
    <div id="output"></div>
  </body>
</html>

To actually modify the DOM this example uses https://github.com/purescript-contrib/purescript-jquery, so you have to make sure that you load jQuery before the app.js is being loaded.

purescript-jquery seems to be the easiest option to work with the DOM. Other options are

https://github.com/purescript-web/purescript-dom (very low level)
https://github.com/aktowns/purescript-simple-dom (couldn't get it to work with PureScript 0.11.6)

The Main.purs looks like this:

module Main where

import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE)
import Control.Monad.Eff.JQuery (append, create, body, ready, setText, find)
import DOM (DOM)
import Prelude hiding (append)

main :: forall eff. Eff ( dom :: DOM
                        , console :: CONSOLE
                        | eff
                        ) Unit
main =
  ready $ do
    -- Get the document body
    body <- body

    -- Find the div
    div <- find "#output" body

    -- Create a paragraph to display a greeting
    greeting <- create "<p>"    
    append greeting div

    setText "Hello Sailor!" greeting

Run pulp browserify and then pulp server and you should see the greeting!

How to get from `pulp init` to running code in browser?

1 Answers1