Use SystemJS to load PS app in browser without bundling

I see now that I didn’t post a demo of using SystemJS to load a PureScript app from the browser, likely because that happened before we had this Discourse forum!

Anyways, I’ve been seeing several new people coming into the PureScript Slack room to get help with running their app in the browser. Compared to bundling, adding SystemJS to your development process is so much easier for beginners. My pull request modifying the code-genned module paths links to a screencast which demonstrates it, but I’ll link it here too.

Screencast demo of SystemJS to load PureScript from the browser: https://1drv.ms/v/s!AnIo6jtaL-CjkG-zDxXZxVHIc-8s

Essentially, this is how you use it:

<!DOCTYPE html>
<html>
<head>
  <!-- Include the version of SystemJS which supports CommonJS modules,
  called the development version of SystemJS. -->
  <script src="../node_modules/systemjs/dist/system.js"></script>
</head>
<body>
  <script>
  // Then use it, `SystemJS`, to load the top-level module of your PS app
  //   and execute the function which starts your app.
  SystemJS.import('../output/Main/index.js')
    .then(function(mod) {
      mod.main();
    });
  // In the development version of SystemJS, as part of loading this module, it will
  //   search for modules it imports and load them, and the same for all transitive
  //   dependencies of this top-level module.
  // It's pretty awesome that SystemJS can do this for CommonJS-formatted modules
  //   which is great because that's the only module format PureScript will currently output.
  </script>
</body>
</html>

Then just start up a basic web server which will serve the local directory as a file system. Maybe like this?

$ npm install -g http-server
$ http-server
# Open the shown URL in a browser and open the "index.html" file.
2 Likes

This is really awesome, but one thing to be careful of is that systemJS seems to have breaking changes so I couldn’t make this work with versions 2.0.0 or greater :(. 0.21.6 works for me though :).

1 Like