Skip to main content
Markdown

Deploying mobile apps

Your app in WordPlus Cloud​

React Nativenothing to add: it has no address
Capacitor on iOScapacitor://localhost
Capacitor on Androidhttps://localhost (http://localhost with androidScheme: 'http')
The Ionic web viewionic://localhost

Use the app you have for your website, so the apps and the site share rooms and users. The key and secret stay on your server. The app gets what it needs from your server config() when it signs in.

Your server address​

Builds point at your server in full (https://shop.example.com), over HTTPS: iOS refuses plain HTTP to anything but the device itself, and Android from API 28. While you develop on a simulator, localhost reaches your Mac from the iOS simulator, and 10.0.2.2 from the Android emulator.

CORS for Capacitor​

A Capacitor app page is on its own address, so your server answers it across origins, for the realtime routes and anything else the app asks:

// Express
const APPS = [ 'capacitor://localhost', 'https://localhost' ];
app.use( ( req, res, next ) => {
    if ( ! APPS.includes( req.get( 'origin' ) ) ) return next();
    res.set( {
        'Access-Control-Allow-Origin': req.get( 'origin' ),
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Realtime-Tab',
        'Access-Control-Allow-Methods': 'GET, POST',
        Vary: 'Origin',
    } );
    req.method === 'OPTIONS' ? res.sendStatus( 204 ) : next();
} );

In Laravel, config/cors.php with those allowed_origins. In Django, django-cors-headers. In FastAPI, CORSMiddleware. React Native needs none: it is not a page.

The app files (Capacitor)​

realtime-worker.js, realtime-rooms.min.js, realtime-rooms-e2ee.worker.js and realtime-ui.min.js go in the app web folder (npx wordplus-realtime copy www/) in every build, so the app carries the ones its package came with.