alexmingoia/pux-starter-app

Starter Pux app w/ hot-reloading and isomorphic routing and rendering

pux-starter-app

The starter app is a skeleton Pux project configured with webpack and supporting hot-reload for rapid development.

For isomorphic rendering and routing a more complex configuration is available in the isomorphic branch.

Installation

Clone the repository and run npm install to get started:

git clone git://github.com/alexmingoia/pux-starter-app.git my-awesome-pux-app
cd my-awesome-pux-app
npm install
npm start

After compiling the app should be available at http://localhost:8080.

Directory structure

• src: Application source code.
  • src/App/Config.js: Configuration values.
  • src/App/Config.purs: Configuration type.
  • src/App/Events.purs: Application event type and foldp function.
  • src/App/Routes.purs: Routes.
  • src/App/State.purs: Application state type and init function.
  • src/App/View/Homepage.purs: Home page.
  • src/App/View/Layout.purs: App layout.
  • src/App/View/NotFound.purs: 404 page.
  • src/Main.purs: PureScript entry point.
• static: Static files served with application.
• support: Support files for building.
  • support/entry.js: Webpack entry point. Handles hot reloading.
• bower.json: Bower package configuration.
• package.json: Node package configuration.
• webpack.config.js: Webpack configuration.

NPM scripts

watch

npm start or npm run watch will start a development server, which hot-reloads your application when sources changes.

serve

NODE_ENV=production npm run serve builds your application and starts a production server.

build

npm run build builds application client and server bundles.

pux-starter-app's Issues

Broken in Windows environment

So I am following your instructions on the Readme, but I get an odd error when I run npm start:

pux-example master* $ npm start

> [email protected] start C:\Purescript\experiments\pux-example
> gulp watch

[20:44:22] Using gulpfile C:\Purescript\experiments\pux-example\gulpfile.js
[20:44:22] Starting 'clean'...
[20:44:22] Finished 'clean' after 113 ms
[20:44:22] Starting 'watch'...
[20:44:22] [webpack] Building...
[20:44:28] [webpack] Build finished.
Hash: 2ad8de32c52e979028a0
Version: webpack 1.12.13
Time: 5848ms
       Asset    Size  Chunks             Chunk Names
js/bundle.js  660 kB       0  [emitted]  main

ERROR in ./src/purs/Client.purs
Module not found: Error: Cannot resolve module '....outpuundle.js' in C:\Purescript\experiments\pux-example\src\purs
 @ ./src/purs/Client.purs 1:17-50

ERROR in ./src/purs/Server.purs
Module not found: Error: Cannot resolve module '....outpuundle.js' in C:\Purescript\experiments\pux-example\src\purs
 @ ./src/purs/Server.purs 1:17-50

ERROR in ./src/purs/State.purs
Module not found: Error: Cannot resolve module '....outpuundle.js' in C:\Purescript\experiments\pux-example\src\purs
 @ ./src/purs/State.purs 1:17-50

Seems like a file name is getting truncated somewhere, but I don't know enough about this set-up to know where to look. Have you ever seen behavior like this before?

Page is simply "dist/index.html" on fresh install

Following this instructions on Node 5.11.1, the page at localhost:3000 is plaintext: dist/index.html
If I add a slash and some letters e.g. localhost:3000/dist then I get something resembling the starter app but with a 404 instead of the increment/decrement area.

There were no errors or warnings that I noticed. This is on Windows 8, and my colleagues suspect some kind of windows-specific webpack weirdness.

Server-side rendering.

Integration with editors.

I just cloned this repository and it works wonders.
I was wondering how would it be to check purescript typecheck errors. Using pulp generally I use pulp build with json-errors together with an Editor like Atom, however this template does not use pulp.

• Did you manage to integrate it an editor (to show linting errors, etc.) or you just look at the errors on the log from npm start?

Use Hyper instead of Express

The HTTP server should use purescript-hyper instead of purescript-express. It's the new hotness.

depricated warnings

on npm start I've got many warning of the type:
Class import from uses deprecated syntax that omits the 'class' keyword

and also:
Module has unspecified imports, consider using the explicit form

Huge build times

Hi,
I've just cloned this repo and started it following the readme.

My problem is that each build takes ~30/40 seconds, even on hot reloads. Every time I get something between 150 and 750 warnings.

Basically it stays on the webpack building... message for those 30/40 seconds and then dumps all the warnings and the bundle is now VALID message.

I'm on Ubuntu 15.10, psci is version 0.8.3.0 (if it matters)

Thanks!

Hot reload only works with src/Layout.purs

• Download app
• Compile
• Make change to src/Layout.purs
• Works fine
• Make an error in src/Counter.purs
• Compile breaks
• Fix error in src/Counter.purs
• Recompile does not trigger

Uglification fails when using webpack -p

When executing webpack -p I get the following error:

$ webpack -p
  [87] ./src/App/Routes.purs 1.44 kB {0} [built]
  [88] ./src/App/State.purs 727 bytes {0} [built]
  [91] ./~/preact-compat/dist/preact-compat.es.js 17 kB {0} [built]
 [115] ./src/App/Events.purs 1.27 kB {0} [built]
 [117] ./~/preact-compat/server.js 230 bytes {0} [built]
 [153] ./support/entry.js 355 bytes {0} [built]
 [221] ./~/prop-types/index.js 1.08 kB {0} [built]
 [278] ./src/App/Config.purs 185 bytes {0} [built]
 [279] ./src/App/View/Homepage.purs 2.1 kB {0} [built]
 [280] ./src/App/View/Layout.purs 8.74 kB {0} [built]
 [281] ./src/App/View/NotFound.purs 754 bytes {0} [built]
 [282] ./src/Main.purs 2.74 kB {0} [built]
 [285] (webpack)/buildin/module.js 517 bytes {0} [built]
 [286] ./src/App/Config.js 175 bytes {0} [built]
 [287] multi ./support/entry.js 28 bytes {0} [built]
    + 273 hidden modules

WARNING in            Src   Lib   All
Warnings   0     0     0  
Errors     0     0     0  


ERROR in bundle.js from UglifyJs
Unexpected token: name (ClientEntry) [bundle.js:24180,4]

It's due to the fact that entry.js is written in ES6, but uglify-js doesn't support that yet.

Simplify starter app to be SPA and move isomorphic setup to separate branch

Related Gitter conversation: https://gitter.im/alexmingoia/purescript-pux?at=591e187533e9ee771cbf44f5

Server-side pre-rendering: I do not understand how it currently works with Pux

First: thanks for making Pux, it is an amazingly complete and useful piece of machinery.

In the issues I found that server-side rendering should be implemented, but I do not see how that works. Also I think that to do pre-rendering of the kind that I found very useful in React apps, it needs to be able to parse the routes on the server-side, in order to know how to pre-render the right page.

Currently it uses a middleware to catch any routes and serve the index.html, then the actual rendering takes place on the client.

Now if the routing code can be used server-side (possibly combined with a cookie) to pre-render the page that would otherwise get rendered on the client, and serve that instead of the index.html: that would be the useful kind of pre-rendering I've come to like from using React.

I'm not aware of any framework in a strongly typed language that compiles to JS (PureScript/ Elm/ GHCJS) that can do this trick.

The benefits of doing this kind of pre-rendering are:

• SEO optimal (1. still crawlers prefer HTML over having to render the JS; 2. ability to serve faster)
• Serve faster, possibly by implementing (something akin to) proxy caching
• Render the first page faster (no need to: first download an empty HTML page, then download and interpret an JS file, then execute the JS file to update the DOM to contain content, then render the DOM)

'pulp browserify --optimise > index.js' couldn't find react-dom

I suppose this is because it is using preact? Is there a work around?

* Browserifying project in /Users/mchaver/documents/pux-starter-app
* Building project in /Users/mchaver/documents/pux-starter-app
* Build successful.
* Browserifying...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module 'react-dom' from

Opinion about CSS Modules?

I think CSS Modules is a great idea to produce CSS that is scoped to the current component. Is anyone interested in it?

The upside is Webpack has really great tooling with css modules, the style loader, post css, etc. But of course it's not type safe (like purescript-css).

Hot reloading doesn't work

On a clean clone of the pux-starter-app, after running npm install, the following error occurs when making changes to source files. The hot module replacement sees this error and triggers a full page refresh, but you can see the error if you set "Preserve log" in the Chrome dev console.

Error: EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.

This prevents hot reloading from ever working, as the HMR runtime will always do a full page refresh, blowing out all your state.

Question: Minimizing toolset

First of all: Pux is just awesome - thanks for this great stuff!

What about minimizing the toolset (Pulp, Gulp) to build the app? The implementation of Hot Module Replacement (HMR) could be simplified, too. Here is an example based on your Pux Counter, but it is build with webpack only (without the need of Pulp and / or Gulp) https://github.com/sectore/purescript-webpack-vanilla-hmr

Report build errors to browser window

In today's meetup, you may have seen my build errors reported to the browser window. This is an improvement which I've been working on and should be releasing soon.

build fails.

I've followed instruction of README.md. but it fails with following messages.

npm WARN [email protected] license should be a valid SPDX license expression
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/6.2.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node --harmony_destructuring lib/install.js`
npm ERR! Exit status 9
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node --harmony_destructuring lib/install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the purescript package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node --harmony_destructuring lib/install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs purescript
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls purescript
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/yun/code/purescript/example/npm-debug.log

File changes no longer trigger recompilation

This used to work, but not anymore. File changes are not picked by up npm start and no re-compilation is being triggered. Scrolling up the terminal I notice Error: purs-loader failed which seems to be relevant.

The workaround is to Ctrl+C and run npm start again, but this is painful due to the slowness of the whole process (takes 5-10 seconds).

ERROR in ./src/Layout.purs
Module build failed: Error: compilation failed
    at ChildProcess.<anonymous> (/Users/srid/Projects/Pallanguzhi/node_modules/purs-loader/lib/Psc.js:48:16)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:885:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:501:12)
 @ ./support/index.js 2:19-48
 @ multi main

ERROR in ./src/Main.purs
Module build failed: Error: purs-loader failed
    at /Users/srid/Projects/Pallanguzhi/node_modules/purs-loader/lib/index.js:141:32
    at Array.forEach (native)
    at /Users/srid/Projects/Pallanguzhi/node_modules/purs-loader/lib/index.js:140:31
    at tryCatcher (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/promise.js:510:31)
    at Promise._settlePromise (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/promise.js:567:18)
    at Promise._settlePromise0 (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/promise.js:612:10)
    at Promise._settlePromises (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/promise.js:687:18)
    at Async._drainQueue (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/async.js:138:16)
    at Async._drainQueues (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/async.js:148:10)
    at Immediate.Async.drainQueues (/Users/srid/Projects/Pallanguzhi/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:649:20)
    at tryOnImmediate (timers.js:622:5)
    at processImmediate [as _immediateCallback] (timers.js:594:5)
 @ ./support/index.js 1:11-38
 @ multi main

Error in Purescript compilation

I cloned the repo and followed the instructions, but I get some errors when I run npm start:

$ npm start

> [email protected] start /Users/liminalisht/dev/pux-starter-app
> npm run watch

> [email protected] watch /Users/liminalisht/dev/pux-starter-app
> npm run clean && node ./webpack.config.js

> [email protected] clean /Users/liminalisht/dev/pux-starter-app
> rimraf static/dist && rimraf dist && rimraf output

Compiling PureScript...
Finished compiling PureScript.
webpack built 410088aac3d888a25cd4 in 1205ms

ERROR in PureScript compilation:
events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: spawn /Users/liminalisht/dev/pux-starter-app/node_modules/purescript/vendor/psc ENOENT
    at exports._errnoException (util.js:893:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
    at onErrorNT (internal/child_process.js:348:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Function.Module.runMain (module.js:449:11)
    at startup (node.js:148:18)
    at node.js:405:3

ERROR in ./src/Main.purs
Module build failed:
 @ ./support/index.js 1:11-38

ERROR in ./src/Layout.purs
Module build failed:
 @ ./support/index.js 2:19-48
webpack: bundle is now VALID.

I see that there is another issue where the recommendation is to use v. 5 of node, b/c there are issues with v6 and purescript generally. However, I am using v. 5.12.0

Serve app from any URL and talk about server setup in the readme

The web server should serve the app JS/HTML from any request URL, in addition to / index route.

npm start throws error regarding webpack config

Hi,
I get this error when trying to run npm start on my system: npm ERR! Failed at the [email protected] serve:watch script 'node ./webpack.config.js'.

ERR! Linux 4.4.5-1-ARCH
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "serve:watch"
npm ERR! node v5.9.1
npm ERR! npm v3.8.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve:watch: node ./webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:watch script 'node ./webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the purescript-starter-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node ./webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs purescript-starter-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls purescript-starter-app
npm ERR! There is likely additional logging output above.

Getting an undefined 'val' at runtime

I've managed to get this, after trying to integrate WebSockets into the app. The code compiles, but at run-time, weird stuff happens with Devtool.

Devtool.js?6e71:20 Uncaught TypeError: Cannot read property 'constructor' of undefined
    at Object.eval (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:20:13)
    at JSON.stringify (<anonymous>)
    at Object.exports.stateToString (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:19:15)
    at Object.eval [as view] (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:222:67)
    at eval (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:73:23)
    at eval (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:24:20)
    at eval (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:16:24)
    at __do (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:68:78)
    at __do (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:263:11)
    at eval (eval at <anonymous> (bootstrap 8861a66…:708), <anonymous>:12:20)

the relevant line of code is the if-conditional here:

...
exports.stateToString = function (s) {
  return JSON.stringify(s, function (key, val) {
    if (!val.constructor.name.match(/(Object|Boolean|Array|String|Number|Date|Symbol)/)) {
      return exports.actionToString(val);
    }
...

This seems to be from a file generated from Pux.Devtool by the build? The full file is here:

// module Pux.Devtool

exports.actionToString = function (a) {
  function toString(a) {
    var name = a.constructor.name.match(/(String|Number|Boolean)/) ? a : a.constructor.name;
    var str = [name];
    Object.keys(a).forEach(function (key) {
      if (key[0] === 'v' && key[4] === 'e') {
        str.push('(' + toString(a[key]) + ')');
      }
    });
    return str.join(' ');
  }

  return toString(a);
};

exports.stateToString = function (s) {
  return JSON.stringify(s, function (key, val) {
    if (!val.constructor.name.match(/(Object|Boolean|Array|String|Number|Date|Symbol)/)) {
      return exports.actionToString(val);
    }
    return val;
  }, 2)
  .replace(/"([^"]+)":/g, '$1:')
  .replace(/<\//g, '<\\/')
  .replace(/\n/g, '<br />')
  .replace(/  /g, '&nbsp;&nbsp;');
};

The code is currently at https://github.com/louisch/pux-frontend, by the way.

Error on `npm install`

I got the following error when attempting an npm install:

bower purescript-pux#^11.0.0   EINVRES Request to https://bower.herokuapp.com/packages/purescript-pux failed with 502
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `bower cache clean && bower install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tim/.npm/_logs/2018-10-07T13_25_15_233Z-debug.log

Unable to build due to pux-css

Starting from a fresh git clone, I do npm install and see this error:

bower purescript-pux-css#^1.0.0         ENORESTARGET No tag found that was able to satisfy ^1.0.0

Additional error details:
No versions found in https://github.com/alexmingoia/pux-css.git

npm WARN [email protected] license should be a valid SPDX license expression
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/Cellar/node/5.7.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.7.0
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `bower cache clean && ./node_modules/.bin/bower install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'bower cache clean && ./node_modules/.bin/bower install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the pux-starter-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower cache clean && ./node_modules/.bin/bower install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs pux-starter-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls pux-starter-app
npm ERR! There is likely additional logging output above.

Doesn't work on Mac OS 10.10.5

node v5.4.0

Project is running at http://localhost:8080/
webpack output is served from http://localhost:8080/dist/
Content not from webpack is served from /Users/<user>/Code/purescript/pux-starter-app/static
Hash: cba41386c9667c0713bd
Version: webpack 2.6.1
Time: 1171ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  342 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 305 kB [entry] [rendered]
   [34] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [35] (webpack)-dev-server/client?http://localhost:8080 5.68 kB {0} [built]
   [36] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [37] ./support/entry.js 355 bytes {0} [built]
   [39] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [41] ./~/events/events.js 8.33 kB {0} [built]
   [42] ./~/html-entities/index.js 231 bytes {0} [built]
   [47] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [48] ./src/Main.purs 497 bytes {0} [built] [failed] [1 error]
   [79] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [81] ./~/url/url.js 23.3 kB {0} [built]
   [83] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
   [84] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
   [86] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [87] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./support/entry.js 52 bytes {0} [built]
     + 73 hidden modules

ERROR in ./src/Main.purs
Module build failed: Error: compilation failed
    at ChildProcess.<anonymous> (/Users/<user>/Code/purescript/new-pux-sa/node_modules/purs-loader/lib/compile.js:53:18)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:821:16)
    at Socket.<anonymous> (internal/child_process.js:319:11)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at Pipe._onclose (net.js:469:12)
 @ ./support/entry.js 1:18-45
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./support/entry.js

ERROR in events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn /Users/<user>/Code/purescript/new-pux-sa/node_modules/purescript/vendor/purs ENOENT
    at exports._errnoException (util.js:856:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at nextTickCallbackWith2Args (node.js:478:9)
    at process._tickCallback (node.js:392:17)
    at Function.Module.runMain (module.js:432:11)
    at startup (node.js:141:18)
    at node.js:1003:3


webpack: Failed to compile.