Development Guides
Development of MiniApps is not rocket science! Here are some guides to help you.
Development Guides

FAQs


https://developers.rakuten.net/hc/en-us

Not a Developer?


Check out the Mini App Editor! The Mini App editor allows you to create beautiful Mini Apps without knowing how to code! It's a great place to start getting content published in a Mini App. 
For the full power of Mini Apps, continue reading.

The SDKs


The Mini App Platform has three SDKs, two native SDKs for Android and iOS, and the JS SDK for Mini App developers. 

The Android SDKiOS SDK, and JS SDKs are hosted on GitHub. These SDKs include both the SDK itself and the source for a demo application that can be used both as an example integration and as a tool to test your Mini Apps.

The JavaScript SDK provides the JS libraries for linking your Mini App to a "Host" App. The JavaScript SDK also provides an example MiniApp that demonstrates the SDK's capabilities. 

For documentation on installing the SDKs, or building demo mobile apps that can be used for Mini App testing, please check GitHub.

Android SDK

iOS SDK

JS SDK

Frameworks & Technologies


Generally speaking, any client side JavaScript web framework can be used to generate a Mini App.

Example Client Side Frameworks

  • React JS
  • AngularJS
  • Angular
  • Vue JS
  • ELM Transpiled to JS

You may choose to use your own libraries, or another framework as well.

We recommend React, Vue, or Angular

Some frameworks that haven't worked so well.

Nuxt - we've had some challenges with the generate function and dynamic links. For static content this framework should be fine, but it may be simpler to go back to VueJS instead of finding work arounds.

Next JS - similar to Nuxt, we've found this presents challenges that probably are not worth the trouble. 

If you're using one of these frameworks for an existing site, you're NOT stuck. You just have a little more work to do to make your application work client-side. 

 

Relative paths

Relative paths shouldn't be led by a "/", this would cause the mini app not to load.

For React, a simple fix is to set the homepage field in package.json to "."

For Angular, changing base href from "/" to "."

 

All other complex Mini apps that use webpack, devs will need to set output.publicPath to "." in order for it to work in the host app

 

Preparing your mini app

Just as you would build your web app, you can configure your build pipeline to generate a Mini App.

Rules of thumb

  • Avoid static urls to pages within your mini app - they won't work.
  • Static URLs can be used to load images and JSON. 
  • Ensure your app meets the Mini App Requirements

Server Side Rendering

While server side rendering isn't explicitly supported, that doesn't mean your content can't come from a server. You can pre-generate all your content (like a brochure site) directly, or generate exported output from a CMS and import the content.

Supported Capabilities


For a complete list, please check our SDK documentation & user guides. 

 

Technical Notes


How Mini Apps are hosted inside a Host App through the SDKs

Mini App assets aren’t loaded from a file:// URI and they aren’t loaded from http://localhost/. Instead, assets are loaded from a custom URL which redirects to the Mini App’s assets on the device file system.

This allows each Mini App to maintain separate data storage because each one is recognized as a separate domain such as https://mini-app-id.miniapps.androidplatform.net/. At the moment, we are using a custom scheme. This can present some challenges with CORS policies, which we have guidance for here: CORS Guidelines

Mini App Requirements


A Mini App has certain requirements & limitations to work within the platform.

The Mini App MUST have an index.html file in the root directory of the upload. This file will be treated as the default page of your Mini App.

The Mini App MUST have a manifest.json file in the root directory of the upload. This file is used to specify permissions and is currently required for our partner Host Apps.

Folders

Outside of the required files in the root directory, the folder structure can be as you need it to be. The platform is not opinionated on this topic.

ZIP File Uploads

Please note that Mini Apps should be uploaded as ZIP files. Instructions are available in the upload dialog when attempting to upload a Mini App.

Please note the following:

  • Special or hidden files, such as .DS_Store that are sometimes created by the Operating system may accidentally get created during the ZIP process. To avoid this, we recommend using the command line to ZIP your codebase. 
  • Make sure you zip the contents of your codebase and not the parent directory. 

Example

If your app directory structure looks like

  • dist
    • folder 1
    • folder 2
    • folder 3
    • index.html

Acceptable Zip contents must look like

  • folder 1
  • folder 2
  • folder 3
  • index.html

The following is also accepted, but not preferred:

  • dist
    • folder 1
    • folder 2
    • folder 3
    • index.html

Cleaning your ZIP

If you're on a mac - from Terminal, execute the following command:

 

            
        

zip -d "" "__MACOSX*" *DS_Store*

File Types

Acceptable File Types include

TYPE

EXTENSION

MimeTypes

Web HTML

text/html

Web CSS text/css
JS

JS

application/javascript

text/javascript

application/x-javascript

Data JSON application/json
Data XML

application/xml

text/xml

Image PNG image/png
Image

JPEG

image/jpeg
Image JPG  
Image SVG image/svg+xml
Image GIF image/gif
Audio MP3 audio/mp3
Audio MPEG audio/mpeg
Web PLIST

-

JS MAP -
ZIP ZIP

application/x-compressed

application/x-zip-compressed

application/zip

multipart/x-zip

Icon ICO  

 

As a rule of thumb, if you don't need an asset for your application to open, you should load it at runtime from a remote location. 

Excluded File Types:Please note that we do accept requests for additional file types, however, we do not grant all requests. Here are some file types we have explicitly chosen not to support

All fonts (.ttf, .woff, etc)

Text Files (.txt, .rtf, etc)

Total Upload Size

The total size on disk of your upload & MiniApp (uncompressed) must not exceed 30MB. This is both a consideration of the platform and of the host Mobile Applications. Additional content needed at run time should be loaded via external sources, CDNs, APIs, etc.

 

 

 

Core SDK Enabled Features


For a complete list of features, please review the user guides for the respective SDKs

Android SDK User Guide

iOS SDK User Guide

JS SDK User Guide

Analytics


There are plenty of mature analytics solutions for your service to use. We list out a few here for your consideration. Whether you need analytics for your MiniApp, or host app, these options are available to you.

Google Analytics

A well known and mature platform.

https://analytics.google.com/analytics/web/provision/#/provision

Adjust

A marketing & cohort driven analytics platform

https://www.adjust.com

MixPanel

Another mature & robust analytics platform

https://mixpanel.com

move to top