Testing an iframed version of an Answers experience is an important part of our development process. I wanted to start a conversation on best practices, and am interested if there’s anything we can do to make it simpler, or more of an out of the box workflow.
Here’s what I’ve been doing:
- Create a iframe.html file in the output directory with an answers container and js snippet.
- Update jambo config preservedFiles to preserve iframe.html
This isn’t too difficult, but the files can’t be committed because we don’t want to actually publish the iframe.html page. If you need anything custom on the iframe.html page there isn’t a good way to preserve those customizations.
- Create iframe.html somewhere else in the repo and commit it
serveseparately on a different port to serve iframe.html
This has the advantage of letting us commit the file, however because it’s on a different port iframe.js doesn’t set the src for the iframe correctly. It’s possible the logic there could be updated so this works?
Another thing that has caused difficulty is the default behavior of
serve which strips the
.html suffix of pages. This breaks certain behaviors, for example if you search for
test query on a universal page, then a link in the vertical navigation component will look like:
http://localhost:8080/vertical.html?query=test+query, when you click the link however,
serve will redirect from
/vertical and in the process strip the query param. We’ve instead been serving the site with
python -m SimpleHTTPServer. It looks like there’s a
cleanUrls config option that could also be disabled: GitHub - vercel/serve-handler: The foundation of `serve`.
To summarize, some specific changes that I think would be helpful:
- update iframe.js logic to correctly calculate iframe url when accessed locally on a different port than the main answers experience
- include default configuration for
serveto disable cleanUrls behavior
But anything else that makes this easier would be appreciated. The things I’ve brought up also only help with local development, I don’t know of a good way to do this at all in the code editor / preview experience.