Hi, we have a couple use cases where client page load speed is paramount where we’ve built out API backend workflows along with endpoints for data.
Since Bubble permits session cookies, we’d like the option to create a raw HTML page that doesn’t download any of the Bubble front end client and instead we are responsible for the entirety of the page and that is accessed in the same way as any other page, where a representative link might be https://some-app.bubbleapps.io/raw-html-page.
That page might something as simple as below and of course this page only shows the content if the session cookies match like any other page.
This could simply be a page setting - use Bubble front end (which we still need for other pages – just not these sorts of lightweight pages) or use raw HTML which just gives us a text editor (or the option to upload an HTML file).
<html>
<script>
fetch('https://some-app.bubbleapps.io/api/1.1/wf/backend-workflow-endpoint/',
{method:'post',
body: JSON.stringify({
subject: "hello world",
body: 'excited',
hook_id: '1'
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}})
.then(response => response.json())
.then(data => console.log(data));
</script>
</html>
2 Likes
hmm - wonder if this could be solved by a backend workflow in some way – create an endpoint that serves / replies with an html page?
Curious as ty why not just use an HTML widget and build with that, you can still use dynamic info if needed even in the HTML
it loads all the other Bubble front end things which we don’t need and way too slow for use case, e.g., just the x10.js file in this network trace of a Bubble page containing only an HTML element is massive – 2MB from 20 sources in about 2.
in this scenario, while the Bubble backend and API workflows are great for what we need, the front end is just too heavyweight and the option to roll raw HTML pages would be great (we’re essentially low-coding the backend and raw coding the front end).
1 Like
Gotcha! I see what you’re trying to do
progress! although total hack 
adding this to the page HTML headers achieves most of the net effect – can test here at https://jingle-mobile-app-mark-1.bubbleapps.io/test
while it doesn’t interrupt any asset downloads the perceived effect to the user is much faster rendering and since most of the assets are static, will be cached for most users – certainly good enough for MVP / POC testing
add this code to your page HTML header – and not app HTML headers unless just want to do for whole app
substitute whatever want for HTML code
<script type="application/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
window.stop();
document.write("<html>foo</html>");
});
</script>
2 Likes
