Welcome to the RebornXP Developer's Guide! This guide is designed to help you publish your web app to the RebornXP Appstore using the Developer Panel. Basically your app is living under an iframe tag from your own production link. Make sure that you have anti-framing disabled wherever your app is hosted. Follow these steps to get started:
var el = $.parseHTML(`<window width="800" height="500" title="Your App's title">
<!--Adjust the window title and size according to your web app-->
<style>
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
.frame-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
</style>
<div class="frame-container">
<iframe height="100%" seamless="seamless" width="100%" src="https://www.helloworld.org"></iframe>
<!--Make sure your site has anti-framing disabled or your app will show a blank screen!-->
</div>
</window>`);
document.body.append(el[0]);
$(el).updateWindow();
For reference, following code compiles a Microsoft Bing Search App:
var el = $.parseHTML(`<window width="800" height="800" title="Bing Search">
<style>
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
.frame-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
</style>
<div class="frame-container">
<iframe height="100%" seamless="seamless" width="100%" src="https://bing.com"></iframe>
</div>
</window>`);
document.body.append(el[0]);
$(el).updateWindow();
We hope this guide was helpful in getting your web app published to the RebornXP Appstore. If you have any questions or issues, please feel free to contact us. Good luck and happy coding!