dmsimard
commented
5 years ago From my own research and experimentation, it feels like react-snap might be able to help but there are some things to figure out.
I sent a test patch which adds the react-snap dependency, a npm run snapshot command and the necessary adjustments to src/index.js: https://review.opendev.org/#/c/664941/
The generated tree looks like this:
$ tree build/
build/
├── 200.html
├── 404.html
├── asset-manifest.json
├── config.json
├── favicon.ico
├── index.html
├── manifest.json
├── playbooks
│ ├── 1
│ │ └── index.html
│ ├── 2
│ │ └── index.html
│ └── index.html
├── precache-manifest.ed3415637a06426d718ebbe2d579a0d8.js
├── service-worker.js
└── static
├── css
│ ├── 2.b346d2ff.chunk.css
│ └── 2.b346d2ff.chunk.css.map
├── js
│ ├── 2.fb10dc57.chunk.js
│ ├── 2.fb10dc57.chunk.js.map
│ ├── main.bd44d76a.chunk.js
│ ├── main.bd44d76a.chunk.js.map
│ ├── runtime~main.a8a9905a.js
│ └── runtime~main.a8a9905a.js.map
└── media
├── fa-solid-900.27603739.svg
├── fa-solid-900.2e302fa4.eot
├── fa-solid-900.5dc01cfc.woff2
├── fa-solid-900.80c404ff.ttf
├── fa-solid-900.a8eedaad.woff
├── logo.37841b5d.svg
├── overpass-bold.03f13d81.ttf
├── overpass-bold.1be69fa3.eot
├── overpass-bold.c6179bc8.woff
├── overpass-bold.d031db25.woff2
├── overpass-bold-italic.a3014aca.woff2
├── overpass-bold-italic.a7525e62.ttf
├── overpass-bold-italic.ad84fcd4.eot
├── overpass-bold-italic.c0b5bb3c.woff
├── overpass-extrabold.1168ce1e.woff
├── overpass-extrabold.5174bc0e.ttf
├── overpass-extrabold.6e768ba3.woff2
├── overpass-extrabold.b184d3d7.eot
├── overpass-extrabold-italic.0e4f5b12.eot
├── overpass-extrabold-italic.1120bb04.ttf
├── overpass-extrabold-italic.83caef4a.woff
├── overpass-extrabold-italic.cd4ba352.woff2
├── overpass-extralight.453031be.eot
├── overpass-extralight.7a42efd1.ttf
├── overpass-extralight.86fd9ea3.woff
├── overpass-extralight.c5791995.woff2
├── overpass-extralight-italic.07d68df8.ttf
├── overpass-extralight-italic.5a7110dd.eot
├── overpass-extralight-italic.85914371.woff2
├── overpass-extralight-italic.b4ac9dd8.woff
├── overpass-heavy.196bf61d.ttf
├── overpass-heavy.33b983b6.woff2
├── overpass-heavy.42aa590b.woff
├── overpass-heavy.7fe4082d.eot
├── overpass-heavy-italic.77a29c6c.woff2
├── overpass-heavy-italic.9a846a97.woff
├── overpass-heavy-italic.e171c10c.eot
├── overpass-heavy-italic.fc408a5c.ttf
├── overpass-italic.0010a44b.woff
├── overpass-italic.5f705c0e.ttf
├── overpass-italic.6a8cb294.eot
├── overpass-italic.f45ba39e.woff2
├── overpass-light.3875601d.woff
├── overpass-light.b065f905.eot
├── overpass-light.c97e1959.woff2
├── overpass-light.f3914c0c.ttf
├── overpass-light-italic.14564a08.eot
├── overpass-light-italic.5b90b726.woff
├── overpass-light-italic.6715ec5e.woff2
├── overpass-light-italic.df98f835.ttf
├── overpass-mono-bold.433b5c73.eot
├── overpass-mono-bold.525102cd.ttf
├── overpass-mono-bold.6cb4a77b.woff2
├── overpass-mono-bold.75f6145e.woff
├── overpass-mono-light.326c58fb.eot
├── overpass-mono-light.3be32ac5.ttf
├── overpass-mono-light.773ec666.woff
├── overpass-mono-light.d34d136b.woff2
├── overpass-mono-regular.052fe015.woff2
├── overpass-mono-regular.88c46de6.ttf
├── overpass-mono-regular.96c8503e.eot
├── overpass-mono-regular.cf00f67f.woff
├── overpass-mono-semibold.3eade9d0.ttf
├── overpass-mono-semibold.404c69d4.woff
├── overpass-mono-semibold.b199b8f9.woff2
├── overpass-mono-semibold.b430c0bc.eot
├── overpass-regular.02d9e0ef.woff2
├── overpass-regular.7053cc87.eot
├── overpass-regular.7b93997b.woff
├── overpass-regular.f3dbad81.ttf
├── overpass-semibold.5ee7acc2.eot
├── overpass-semibold.aabbde80.ttf
├── overpass-semibold.ca834120.woff2
├── overpass-semibold.ec228a39.woff
├── overpass-semibold-italic.4e4b8fd4.ttf
├── overpass-semibold-italic.73eb8e6d.eot
├── overpass-semibold-italic.d91e16a1.woff2
├── overpass-semibold-italic.e244fb96.woff
├── overpass-thin.69bb205a.ttf
├── overpass-thin.8c022f6d.woff2
├── overpass-thin.94f49172.woff
├── overpass-thin.964a9d1d.eot
├── overpass-thin-italic.16380cc4.woff2
├── overpass-thin-italic.2ad7b693.ttf
├── overpass-thin-italic.849bc426.woff
├── overpass-thin-italic.a452cd38.eot
├── pfbg_2000.9a2fcbae.jpg
├── pfbg_576@2x.b48e77bc.jpg
├── pfbg_576.85341a9c.jpg
├── pfbg_768@2x.0099dea3.jpg
├── pfbg_768.c9839717.jpg
├── pfbg_992@2x.1423e11e.jpg
├── pficon.4f40e753.eot
├── pficon.7382cd2e.woff2
├── pficon.efcb4963.woff
├── pficon.f45433f4.svg
└── pficon.f907e666.ttf
7 directories, 117 filesObservations:
- Running the snapshot requires the API server to be running so the app can retrieve the data and generate the pages
- react-snap does not seem to detect the links to the playbook reports (presumably because we're using onClick instead of href?) but is able to render them "manually" by specifying them (as shown in the patch)
- Despite the pages (such as
/playbooks/2) being fully rendered to html (see sample here), there are bits of code that attempt to call out to the API and if the API server is no longer running, it will fail as if you were running fromnpm startor from a regular build out ofnpm run build
If react-snap is the right choice, we need to figure out:
- How to get it to crawl all the links automatically (switch from onclick to href?)
- How to prevent API calls from being sent (could it be as simple as a boolean toggle ?)
If it's not the right choice, I am most definitely open to suggestions.
In ARA 0.x, there is a
ara generate htmlcommand that wraps around Frozen-Flask which takes care of crawling all the pages known by the web application and generate the static HTML/JS/CSS files as a result.It is a useful feature since it allows users to generate a report and render it without requiring a database or an API server -- regardless of the tooling or platform they run Ansible with.
At this time, ara-web can be built to static html/js/css but still expects an API server to query in order to retrieve the data it needs to render the report pages.
We would need a way to generate a static version of the web application that doesn't call out to the API.