HotDocs: Static export

INFO

Static export is currently under development. You can chime in on this GitHub discussion to share wishes and feedback.

Create a static build with Parklife :

bundle add --group development parklife
bundle exec parklife init --rails
Update Parklife
Update bin/static-build
bin/static-build

You can test the static export with:

ruby -r webrick -e 'WEBrick::HTTPServer.new(Port: 8000, DocumentRoot: "build").start'

Refer to the Parklife docs for details on how to tweak the configuration.

Fetch fresh content

There are situations where a static build is limiting. For example, you may have a page that loads some data from the database:

Registered users: #{User.registered.count}

If you exported that page from a development environment, the count would be wrong. And, even if you managed to export it from the production database, the count would be outdated.

You can work around this issue by using the fetcher helper:

After setting fetcher_host in hotdocs_helper.rb, wrap content in a fetcher block to fetch dynamic content from the backend.

WARNING

If the fetcher_host has a different domain than the one you host HotDocs on, you have to configure CORS with something like rack-cors .

For example, given the following is statically exported:

<div id="someid" data-controller="fetcher" data-fetcher-host-value="http://127.0.0.1:3000" data-fetcher-path-value="/my/path" data-fetcher-fallback-value="Registered users: Loading..." style="visibility: hidden;">
  Registered users: #{User.registered.count}
</div>

On the first load, the fallback is rendered:

Registered users: Loading...

the fetcher gets fetcher_host + path, which is expected to contain either:

<div id="someid" data-controller="fetcher" data-fetcher-host-value="http://127.0.0.1:3000" data-fetcher-path-value="/my/path" data-fetcher-fallback-value="Registered users: Loading..." style="visibility: hidden;">
  Registered users: #{User.registered.count}
</div>

or an element with the correct id:

<div id="someid">
  Registered users: #{User.registered.count}
</div>

the content is swapped:

- Registered users: Loading...
+ Registered users: #{User.registered.count}

HotDocs: Nav / Sidenav