capacitor-in-nx.md

capacitor-in-nx.md · GitHub

Install dependencies:

npm install @capacitor/{core,cli,ios,android}

Add capacitor config:

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

const config: CapacitorConfig = {
  appId: 'com.joshmorony.happygarden',
  appName: 'HappyGarden',
  webDir: '../../../dist/apps/mobile',
  bundledWebRuntime: false,
};

export default config;

Although we typically just have the one package.json in an Nx workspace, the Capacitor CLI requires the presence of a package.json in the directory it is being run in, so we will need to add one:

{
  "name": "mobile",
  "devDependencies": {
    "@capacitor/cli": "^3.5.1"
  }
}

Add target:

    "cap": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "command": "npx cap {args.command}",
        "cwd": "apps/mobile/src"
      }
    },

nx run mobile:cap --args="--command='add ios'"
nx run mobile:cap --args="--command=sync"

This will work for any capacitor command, but it's a bit much to write all the time. For commands we are going to be running often we might want to make our configuration a little more complex:

"cap": {
      "executor": "@nrwl/workspace:run-commands",
      "configurations": {
        "any": {
          "command": "npx cap {args.command}",
          "cwd": "apps/mobile/src"
        },
        "sync": {
          "commands": ["nx run mobile:build:production", "npx cap sync"],
          "parallel": false,
          "cwd": "apps/mobile/src"
        },
        "open-ios": {
          "command": "npx cap open ios",
          "cwd": "apps/mobile/src"
        },
        "open-android": {
          "command": "npx cap open android",
          "cwd": "apps/mobile/src"
        },
        "run-ios": {
          "command": "npx cap run ios",
          "cwd": "apps/mobile/src"
        },
        "run-android": {
          "command": "npx cap run android",
          "cwd": "apps/mobile/src"
        }
      },
      "defaultConfiguration": "any"
    }

We have set up "any" as the default configuration so we can still run:

nx run mobile:cap --args="--command='sync'"   

For any command, but we have also set up other configurations so we can just do:

nx run mobile:cap:sync

nx run mobile:cap:open-ios