Skip to main content
This section describes the tools and environments used to develop, test, and debug Rebell Mini Apps. Before starting development, developers should understand how local tooling, sandbox environments, and production environments relate to each other.

​
Development Environments

Rebell Mini App development typically involves multiple environments.
Used for:
  • Development
  • Functional testing
  • Integration testing with merchant backend
  • Testing payment flows without real funds
Characteristics:
  • Uses sandbox credentials
  • Isolated from production users
  • Supports debugging and inspection tools
  • Webhooks and backend endpoints must also point to sandbox systems
Mini Apps must be explicitly promoted from sandbox to production during the publishing process.

​
Environment Comparison

AspectSandboxProduction
UsersTest accountsReal customers
PaymentsSimulatedReal funds
CredentialsSandbox keysProduction keys
DebuggingFull accessLimited
WebhooksSandbox endpointsProduction endpoints

​
Mini Program Studio

Mini Program Studio is the official IDE for developing Rebell Mini Apps.

Project Management

Project creation and configuration

Code Editing

Source code editing with syntax highlighting

Built-in Simulator

Preview and test your Mini App locally

Debugging Tools

Inspect, log, and debug your code

Packaging

Build and package your Mini App for submission

Submission

Submit Mini Apps for review and release

​
When Mini Program Studio Is Required

Mini Program Studio is required for:
  • Creating Native Mini Apps
  • Running local simulations
  • Submitting Mini Apps for review and release
  • Debugging Mini App–specific behavior

​
Local Development & Simulator

The Mini Program Studio includes a simulator that emulates the Rebell SuperApp runtime. The simulator allows developers to:
1

Preview UI

See your Mini App interface in real-time as you code
2

Test Navigation

Validate page transitions and navigation flows
3

Simulate Interactions

Test user interactions like taps, scrolls, and form inputs
4

Debug Logic

Debug JavaScript logic with breakpoints and inspection
5

Inspect Logs

View console logs and runtime errors
Important simulator limitations:
  • Simulator behavior closely matches the real SuperApp but is not identical
  • Performance and device-specific behavior should always be validated on real devices
  • Payment flows in the simulator use sandbox mode

​
Simulator vs Real Device Testing

FeatureSimulatorReal Device
UI renderingApproximateExact
PerformanceVariesAccurate
Native featuresEmulatedFull
Payment flowsSandbox onlyFull testing
DebuggingFull accessLimited
Always perform final testing on real devices before submitting for review.

​
Project Structure

A Mini App project follows a predefined file structure enforced by the platform. At a high level, a Mini App contains: 
my-mini-app/
├── app.json              # Application configuration
├── app.js                # Application logic
├── app.css               # Global styles
├── pages/
│   ├── index/
│   │   ├── index.json    # Page configuration
│   │   ├── index.js      # Page logic
│   │   ├── index.axml    # Page layout
│   │   └── index.css     # Page styles
│   └── detail/
│       ├── detail.json
│       ├── detail.js
│       ├── detail.axml
│       └── detail.css
├── components/           # Reusable components
└── assets/               # Static assets (images, fonts)

​
Key Files

Defines global settings including:
  • Pages list and navigation
  • Window appearance
  • Tab bar configuration
  • Permission declarations
Contains:
  • Application lifecycle handlers
  • Global state management
  • Initialization logic
Each page consists of four files:
  • .json - Page configuration
  • .js - Page logic and data
  • .axml - UI layout (XML-based)
  • .css - Page styles
Developers should follow the standard structure to ensure:
  • Compatibility with the runtime
  • Correct packaging and submission
  • Predictable lifecycle behavior

​
Tooling Differences: Native vs H5

While both Native and H5 Mini Apps use Mini Program Studio, there are differences in how tooling is used.
  • Fully developed inside Mini Program Studio
  • Use platform-specific UI components
  • Debugged primarily via the built-in simulator
  • All code follows the Mini App framework conventions
Regardless of type, submission and release are always handled through the same platform tooling.

​
Backend Development Considerations

Mini App development always goes hand-in-hand with merchant backend development.
Mini Program Studio does not replace backend tooling; it complements it.

​
Backend Preparation Checklist

  • Prepare backend APIs before integrating UI flows
  • Expose sandbox and production endpoints
  • Document API contracts for Mini App team
  • Implement authentication and authorization checks
  • Support authCode exchange flow
  • Handle session management
  • Implement payment creation endpoints
  • Handle asynchronous payment notifications (webhooks)
  • Support payment status queries
  • Configure sandbox backend endpoints
  • Configure production backend endpoints
  • Set up environment-specific credentials

​
Access & Account Requirements

To use Mini Program Studio and create Mini Apps, developers need:

Merchant Account

An approved merchant account with Rebell

Developer Console

Access to the Rebell developer console

Roles & Permissions

Assigned roles and permissions for development
Account creation and access management are part of the merchant onboarding process, which is described separately from Mini App development.

​
Development Workflow

A typical development session follows this workflow:
1

Local Development

Write code and preview in the simulator for rapid iteration
2

Backend Integration

Connect to sandbox backend and test API integrations
3

Device Testing

Test on real devices to validate performance and behavior
4

Payment Testing

Test payment flows in sandbox environment
5

Submission

Package and submit for review when ready

​
Debugging Best Practices

Use console.log() for debugging, but remove excessive logging before submission
Monitor network requests to debug API integration issues
Implement proper error handling and display meaningful error messages during development
Use the debugger to inspect component state and data flow

​
Next Steps

With the development environment and tools in place, the next step is to understand how a Mini App evolves over time:

Mini App Lifecycle

Learn about creation, testing, review, and publishing stages

Mini App APIs

Explore the available APIs and capabilities