Skip to main content

Appflow Config Customizations & Monorepo Support

The appflow.config.json allows you to specify specific behaviors for:

  • App directory - in what directory should Appflow start building your app
  • Dependency installation - what commands should Appflow use to install dependencies
  • Web build - what commands should Appflow call to generate the web build
  • Native project paths - in what directory your native project files are located within your repository

Appflow integrates with npm for dependency installation and to generate the web portion of the build, though for some scenarios such as monorepos, yarn, lerna, and other specific cases different integrations might be needed.

In addition, Appflow assumes that there is one app in each Git repo and that app is in the repo's root, which, especially for monorepos, may not be true.

Overview​

The appflow.config.json should be placed in the root of the Git repo and there should only ever be one.

The format of the config file is as such:

{
    "apps":
    [
        {
            "appId": "a0000a0a",
            "root": "apps/my-app",
            "dependencyInstallCommand": "<install_cmd>",
            "webBuildCommand": "<web_build_cmd>",
            "iosPath": "<ios_path>",
            "androidPath": "<android_path>",
        },
        ...
    ]
}
  • apps - the apps block can contain one or more app block definitions.

Each app block can contain the following elements. The only required element of the app block is appId. Unused elements out can be left out.

  • appId - the id of the Application in Appflow, this can be seen on the Application overview page. This is the only required element of the app block
  • root - the directory that Appflow should build the Application from, all commands including dependencyInstallCommand and webBuildCommand are called from this location. Left unset Appflow defaults to the root of the Git repo.
  • dependencyInstallCommand - the command to call to install Application dependencies. It can include navigation to a different directory, if required. npm install will be called if it is not set.
  • webBuildCommand - the command to call to generate the web build for the Application. It can include navigation to a different directory, if required. npm run build (or npm run appflow:build, see here for details on appflow:build) will be called if it is not set.
  • iosPath/androidPath - the path to the directory where native project files (.xcproject, .xcworkspace for iOS apps, top-level build.gradle for Android apps) are located within the repo. If unspecified, Appflow will assume the project files are in ios or android directories directly under the root. (Note: if root is specified, iosPath and androidPath are interpreted as relative to root)
note

For dependencyInstallCommand and webBuildCommand the provided command is called as a shell command, so if needed the current directory can be changed by a command formatted like this:

...
"dependencyInstallCommand": "cd ../.. && yarn install",
...

Specific Examples​

Simple folders​

A Git repo with two apps each in their own subfolder and no other requirements.

├── /
│   ├── apps/
│       ├── my-app1/
│       └── my-app2/
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "root": "apps/my-app1"
        },
        {
            "appId": "b2222b2b",
            "root": "apps/my-app2"
        }
    ]
}

Yarn​

A Git repo with two apps each in their own subfolder and with Yarn used for installing dependencies.

├── /
│   ├── apps/
│       ├── my-app1/
│       └── my-app2/
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "root": "apps/my-app1",
            "dependencyInstallCommand": "cd ../.. && yarn install"
        },
        {
            "appId": "b2222b2b",
            "root": "apps/my-app2",
            "dependencyInstallCommand": "cd ../.. && yarn install"
        }
    ]
}

Lerna​

A Git repo with two apps each in their own subfolder and with Lerna used for installing dependencies.

├── /
│   ├── apps/
│       ├── my-app1/
│       └── my-app2/
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "root": "apps/my-app1",
            "dependencyInstallCommand": "cd ../../ && npx lerna bootstrap"
        },
        {
            "appId": "b2222b2b",
            "root": "apps/my-app2",
            "dependencyInstallCommand": "cd ../../ && npx lerna bootstrap"
        }
    ]
}

Nx​

A Git repo with two apps in their own subfolder and with Nx used for installing dependencies and building.

note

We currently recommend using the nxtend Ionic community plugins for developing Ionic applications in an Nx workspace. However, these plugins are third-party and are not officially supported by Ionic.

├── /
│   ├── apps/
│       ├── my-app1/
│       └── my-app2/
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "root": "apps/my-app1",
            "dependencyInstallCommand": "yarn install && cd ../../ && yarn install",
            "webBuildCommand": "cd ../../ && yarn nx build my-app1"
        },
        {
            "appId": "b2222b2b",
            "root": "apps/my-app2",
            "dependencyInstallCommand": "yarn install && cd ../../ && yarn install",
            "webBuildCommand": "cd ../../ && yarn nx build my-app2"
        }
    ]
}

Custom build commands​

A Git repo with a single app requiring a special web build command for two different types of builds, note each build here needs to be a different app in Appflow

├── /
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "webBuildCommand": "npm run mybuild"
        },
        {
            "appId": "b2222b2b",
            "webBuildCommand": "npm run otherbuild"
        }

    ]
}

Custom native project paths​

A git repo containing native iOS and Android apps in subdirectories.

├── /
│   ├── iMyApp/
│   │   ├── MyApp.xcodeproj/
│   │   └── MyApp.xcworkspace/
│   └── MyAppDroid/
│       ├── build.gradle
│       └── app/
{
    "apps":
    [
        {
            "appId": "a1111a1a",
            "iosPath": "iMyApp"
        },
        {
            "appId": "b2222b2b",
            "androidPath": "MyAppDroid"
        }
    ]
}

Contents