Provide way to define "target environments" for mobile project apps for build/pack

Currently, Wappler does not have a way to specify connections to different targets in mobile projects. Typically, development will happen against a non-prod target of the Wappler server project and at a certain point the mobile app will need to be packed for deployment to end users against the prod target.

I would like to see a way to change the target, like we do in Server projects, so when the app is built/packaged, it updates all of the URL references from the non-prod URL to the prod URL.

As an example, all of these URLs need to be switched from dev URL to prod URL.

bump

This is a real challenge when building mobile apps.

1 Like

Hi @George, this is a challenging issue for mobile development. I've started to build workarounds by using variables and dynamic bindings to switch the domain on pages, but I've run into a blocker on App Flows.

There's no way to dynamically bind a Server Connect action in App Flows. It seems my only option is to run a find/replace across my entire project whenever I want to build against a different target.

It would be ideal to have a global target(s) that can be used across all parts of the mobile app, with a default target that works on the web server, and being able to build against different targets.

2 Likes

Hi @George, just curious if this might make it in the next couple of releases? Otherwise I'll need to develop something custom.

As part of this I desire to have separate locations for SQLite databases, so development and production apps do not access the same local database.

For example:

Updates to capacitor.config.json for separate databases.

/// <reference types="@capacitor/cli" />

import { CapacitorConfig } from '@capacitor/cli';

const isProduction = process.env.NODE_ENV === 'production';

const config: CapacitorConfig = {
  appId: 'co.brightyard.app',
  appName: 'Brightyard',
  webDir: 'www',
  bundledWebRuntime: true,
  plugins: {
    CapacitorSQLite: {
      electronWindowsLocation: isProduction ? 'ProductionDatabases' : 'DevelopmentDatabases',
      electronMacLocation: isProduction ? 'ProductionDatabases' : 'DevelopmentDatabases',
      electronLinuxLocation: isProduction ? 'ProductionDatabases' : 'DevelopmentDatabases',
    },
  },
  electron: {
    customUrlScheme: 'brightyard',
    deepLinkingEnabled: true,
    deepLinkingCustomProtocol: 'brightyard',
    trayIconAndMenuEnabled: true,
  },
};

export default config;

Updates to eletron-builder.config.json for separate installer names -- something like this.

  win: {
    target: 'nsis',
    icon: 'assets/appIcon.ico',
    artifactName: `${productName}-Installer-${process.env.ENVIRONMENT}.${ext}`,
  },
  mac: {
    category: 'your.app.category.type',
    target: 'dmg',
    artifactName: `${productName}-Installer-${process.env.ENVIRONMENT}.${ext}`,
  },
  linux: {
    target: 'AppImage',
    artifactName: `${productName}-Installer-${process.env.ENVIRONMENT}.${ext}`,
  },

As a workaround, why don't you use dynamic api url?

see challenges with using Dynamics API here.

Also, there's more to it. As a developer, I'll need both a development and production electron/android app on my system each with separate databases (dev sqlite database, prod sqlite database, etc).

Maybe @mebeingken has found a way to do this?

I just dynamically change the url of all server connects, forms, etc. I took it one step further and added also a version number of the api so legacy apps in the wild would not break with backend updates.

  <dmx-serverconnect credentials id="update_meal_block" url="http://localhost:3000/api/meal_plans/update_meal_block" noload dmx-bind:url="base_url.value + api_path.value + '/meal_plans/update_meal_block'" site="Meal Planner Pro"></dmx-serverconnect>

base_url and api_path are dmx variables that I set during the Cordova build process since it was different for the multiple tenants using the code base.

I never used any app flows.

Just want to be clear, I'm not talking about dynamic bindings on server connect, but instead, using API's connector, because arent server connect just api's ? You can set dynamic urls depending on the environment..

I'm not sure how that would make this easier. I think we still need a way to adjust the domain in the API URLs prior to, or during, build.

What about local DBs or is all data stored in server db?

All data stored in server db as local storage was not supported when I built these apps, which I have now deprecated. I elected to go to PWA for a number of reasons.

1 Like

Bump

:rocket: bump

Another bump. I could really use this functionality to launch my app.

image

bump