Native app builds

SocialStack supports creating native app builds using the UI's from your project primarily for iOS and Android with experimental desktop support through platforms like Electron. Native app builds are usually created for the purpose of making use of lower level API's of devices. Note that doing so is required on iOS as an app will be rejected if its features are something that could have been made via the web instead. Because of this, SocialStack tries to stay out of the way of your actual native project and essentially provides tooling which generates a set of standalone web files for you such that you can use them in any project. You then only need to display these inside some kind of web UI. This web UI could be loaded by any native framework like Cordova, Electron or something like Coherent UI in Unreal Engine too.

Creating a web bundle

The socialstack command line tools have a build command which will bundle any images into the pack folder ready for the app build

socialstack build

The socialstack command line tools have a buildapp command which will convert a running socialstack instance in to a web bundle for you.

socialstack buildapp -apiUrl https://api.example.com/ -instanceUrl http://localhost:5050/

The apiUrl flag indicates where your live API will be that the app will use. For example, if users login or you use Loop, the requests will be sent to this URL.

The instanceUrl flag indicates where a currently running instance is with the latest version of your page layouts and localisations. These are baked in to the app such that offline users can still navigate around your UI. You must always of course pay special consideration for the increased likelihood of an offline user using your project when you are providing it as a native app.

Cordova example

SocialStack aims to be unopinionated in terms of which platform you choose, however cordova tends to be fairly straight forward to get going, so here is an example of how to do it.

• Create a new cordova project in a directory called 'App' located alongside your UI and Api folders. A folder called 'App' is recommended - or one entirely outside your SocialStack project tree - as a default SocialStack project understands what this folder represents and will ignore parts of it accordingly.

• Configure the cordova xml to use mobile.en.html as its index (entry point) page.

• Add a symlink from UI/public to App/www (including on Windows). At the time of writing, Cordova does not have a way of configuring this location and instead a symlink is very effective. Here's an example of adding a link on Windows via the command prompt in your project directory (don't run this in powershell):

mklink /d "App/www" "../UI/public"

• Run the buildapp command described above. This outputs a UI bundle in to the UI/public directory.

• Run the cordova build command, and you should see your UI inside the native app which is communicating with the configured API URL.

D:\Dev\project
 
socialstack build 
socialstack buildapp -apiUrl http://127.0.0.1:5050/ -instanceUrl http://127.0.0.1:5050/
 
cordova platform rm android
cordova platform add android@12.0.1
cordova build