Native app builds - Revision history

80.229.4.125: /* Cordova example */

2024-04-24T16:07:37Z

Cordova example

← Older revision		Revision as of 16:07, 24 April 2024
Line 36:		Line 36:

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

			<syntaxhighlight lang="bash">
			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
			</syntaxhighlight>

80.229.4.125: /* Creating a web bundle */

2024-04-24T16:07:28Z

Creating a web bundle

← Older revision		Revision as of 16:07, 24 April 2024
Line 18:		Line 18:

	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.		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.

	~~<syntaxhighlight lang="bash">~~
	~~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~~
	~~</syntaxhighlight>~~

	= Cordova example =		= Cordova example =

80.229.4.125: /* Creating a web bundle */

2024-04-24T16:06:53Z

Creating a web bundle

← Older revision		Revision as of 16:06, 24 April 2024
Line 2:		Line 2:

	= Creating a web bundle =		= Creating a web bundle =

			The [https://www.npmjs.com/package/socialstack socialstack command line tools] have a build command which will bundle any images into the pack folder ready for the app build

			<syntaxhighlight lang="bash">
			socialstack build
			</syntaxhighlight>

	The [https://www.npmjs.com/package/socialstack socialstack command line tools] have a buildapp command which will convert a running socialstack instance in to a web bundle for you.		The [https://www.npmjs.com/package/socialstack socialstack command line tools] have a buildapp command which will convert a running socialstack instance in to a web bundle for you.
Line 12:		Line 18:

	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.		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.

			<syntaxhighlight lang="bash">
			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
			</syntaxhighlight>

	= Cordova example =		= Cordova example =

2A02:C7C:C43F:C600:C934:FD6B:6092:1276: /* Cordova example */

2024-04-08T00:20:27Z

Cordova example

← Older revision		Revision as of 00:20, 8 April 2024
Line 21:		Line 21:
	* Configure the cordova xml to use mobile.en.html as its index (entry point) page.		* 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 (~~not~~ powershell):		* 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):

	<syntaxhighlight lang="bash">		<syntaxhighlight lang="bash">

2A02:C7C:C43F:C600:C934:FD6B:6092:1276: /* Cordova example */

2024-04-08T00:19:44Z

Cordova example

← Older revision		Revision as of 00:19, 8 April 2024
Line 24:		Line 24:

	<syntaxhighlight lang="bash">		<syntaxhighlight lang="bash">
	mklink /d "App/www" "..\UI\public"		mklink /d "App/www" "../UI/public"
	</syntaxhighlight>		</syntaxhighlight>

2A02:C7C:C43F:C600:C934:FD6B:6092:1276: /* Cordova example */

2024-04-08T00:19:31Z

Cordova example

← Older revision		Revision as of 00:19, 8 April 2024
Line 21:		Line 21:
	* Configure the cordova xml to use mobile.en.html as its index (entry point) page.		* 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.		* 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 (not powershell):

			<syntaxhighlight lang="bash">
			mklink /d "App/www" "..\UI\public"
			</syntaxhighlight>

	* Run the buildapp command described above. This outputs a UI bundle in to the UI/public directory.		* 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.		* Run the cordova build command, and you should see your UI inside the native app which is communicating with the configured API URL.

TylerO: fixed issue with buildapp example

2024-04-04T02:41:48Z

fixed issue with buildapp example

← Older revision		Revision as of 02:41, 4 April 2024
Line 6:		Line 6:

	<syntaxhighlight lang="bash">		<syntaxhighlight lang="bash">
	socialstack buildapp --apiUrl https://api.example.com/ --instanceUrl http://localhost:5050/		socialstack buildapp -apiUrl https://api.example.com/ -instanceUrl http://localhost:5050/
	</syntaxhighlight>		</syntaxhighlight>

2A02:C7C:C43F:C600:79E7:7E4C:7EDF:28B5: /* Creating a web bundle */

2024-02-08T17:50:43Z

Creating a web bundle

← Older revision		Revision as of 17:50, 8 February 2024
Line 11:		Line 11:
	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 '''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.		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 =		= Cordova example =

2A02:C7C:C43F:C600:79E7:7E4C:7EDF:28B5: /* Creating a web bundle */

2024-02-08T17:46:43Z

Creating a web bundle

← Older revision		Revision as of 17:46, 8 February 2024
Line 5:		Line 5:
	The [https://www.npmjs.com/package/socialstack socialstack command line tools] have a buildapp command which will convert a running socialstack instance in to a web bundle for you.		The [https://www.npmjs.com/package/socialstack socialstack command line tools] have a buildapp command which will convert a running socialstack instance in to a web bundle for you.

			<syntaxhighlight lang="bash">
	socialstack buildapp --apiUrl https://api.example.com/ --instanceUrl http://localhost:5050/		socialstack buildapp --apiUrl https://api.example.com/ --instanceUrl http://localhost:5050/
			</syntaxhighlight>

	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 '''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.

2A02:C7C:C43F:C600:79E7:7E4C:7EDF:28B5: Created page with "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 Electro..."

2024-02-08T17:46:25Z

Created page with "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 Electro..."

New page

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 [https://www.npmjs.com/package/socialstack 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.

* 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.