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 SDK, iOS 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