Highmark.js

Please note that Highmark.js is in ongoing initial development and exists as an npm package to test production builds and distribution only.

To start up a development server

yarn run server:dev - Builds the files in watch mode and runs server

Setup

• [x] Install node packages

• [x] Setup express server

• [x] Create seperate client and server react entrypoints

  • [x] Client entry rendered with BrowerRouter
  • [x] Server entry rendered with StaticRouter

• Server Side Rendering

  • [x] Create a server version of webpack bundle
  • [x] Reduce server bundle size by forcing external packages to not be bundled (not sure if this will still work in Ruby environment, was built for node)
  • [x] Use isomorphic-style-loader to avoid CSS trying to add to DOM on server
  • [x] Use react-universal to do lazy loading client-side and instant loading server-side
  • [x] Add babel-plugin-universal-import so babel picks up react-universal properly
  • [x] Limit server-side chunks to 1 to avoid async loading files
  • [x] Add extract-css-chunks-webpack-plugin to get css chunks in webpack stats output (of the client bundle, server bundle is now only one file)
  • [x] Enable webpack stats output (so server knows what script and link tags to send on a page)
  • [x] Add method to push data back to head of page (PushDataTag)

• [x] Add webpack-flush-chunks and patch it into react-universal

• [x] Import stats file and plugin to webpack-flush-chunks

• [ ] Load initial data server-side and prefill page (React.Suspense required)

  • It could be possible to do initial render pass, collect all the promises and then resolve them manually into page headers

• [x] Avoid loading data if page is pre-filled

  • Data is cached based on resolver and serialized arguments
  • Redux does something VERY similar to prefill the client store

• [ ] Support handling oEmbed version of page based on react-router

  • [ ] Extend the push data handler to accept oEmbed tags? Then just send that result instead of page render

• [ ] Move more packages into peerDependancy

Server

• [x] Directory based page routing
  • [ ] Add directory specific configuration files
  • [ ] Remove react-router and replace with a smaller custom library? (possibly offer as a config option)
• [x] Serve public files
• [ ] Redis integration for publicly build pages (by specifying redis configuration in highmark.config)
• [ ] Add a path for API calls (server-bundle only, does not use the React-router pathing)
• [ ] Add support for changing the HTML lang attribute

Extra server things

• [x] Handle redirects and error codes generated by bundle
• [x] Send CSS/JS assets as Link prefetch headers
• [x] Send initial CSS as inline stylesheet
• [ ] Send Image assets as HTTP Push headers (though not possible with )

Images

• [x] Resize, convert, and minify all images automatically
  • [ ] Additionally create a "sample" data url to blend the image in
  • [ ] Highly extensible per-image config files
• [ ] Image Component
  • [ ] Finds all versions of image and creates a picture source set
  • [ ] Creates temporary "blur" render while image is loading
• [ ] CSS loader that fills in url() rules with appropriate image-set()
• [ ] Scoping / Chunking assets manifest to js bundle that uses them.

Build Step

• [x] Single command development server setup
• [x] Single command production build client/server
• [ ] Directory copy Highmark instead of indivdual files