Skip to content
This repository has been archived by the owner on Mar 22, 2024. It is now read-only.
/ app-guide Public archive

Guide and Template for publishing your web app to the RebornXP App Store

Notifications You must be signed in to change notification settings

shoaib-jamal/app-guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 

Repository files navigation

RebornXP Developer's Guide: Publishing Your Web App to the Appstore

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:

  1. Click here to navigate to Developer's Panel
  2. This guide contains rules and templates for creating a RebornXP-supported program and submitting it to the app store. Take the following code as a reference and write your program to be able to resize the app window, app title, and iframe link, for example:
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(); 

3. After you have modified the code, copy it (don't fork or send pull requests). Next, navigate to the RebornXP Developer's Panel, type in the app name, description, and a proper URL ending with .jpg or .png for an icon and screenshot, for example: https://xyz.com/1.png. In the appcode section, paste your app code, select a category, and click the "Create!" button.

Congratulations, you have successfully published your app to the RebornXP Appstore!

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!

About

Guide and Template for publishing your web app to the RebornXP App Store

Resources

Stars

Watchers

Forks