Capacitor: Multi-app projects config

[GuilhermeBCC]

Feature request

Please add support for multiple projects in angular

Ionic is adding
https://github.com/ionic-team/ionic-cli/issues/3281

Expected result:
npx cap add android --project=app2
npx cap update --project=app2

[kevin-lot]

Question ???
In capicator configuration, "only" input and output entries for each project are needed.

[GuilhermeBCC]

Hello Kevin, could you send a configuration as an example? Is there any documentation on this? How would you configure the Capacitor for each project? Ionic and Angular use an extra configuration file at the root of each project. I think that capacitor should have too.

[dwieeb]

@GuilhermeBCC Putting multiple Capacitor configurations into a single file is a good feature request for some point in the future, but not particularly necessary to get a good experience in Ionic CLI projects.

For Cordova, which requires a single config.xml, the Ionic CLI uses the "active project" to spin up the Cordova CLI in different directories. I believe using this same approach for Capacitor will be the easiest. Please subscribe to https://github.com/ionic-team/ionic-cli/issues/3494 for updates on that.

[sneko]

@GuilhermeBCC any news on this request?

As described on https://github.com/ionic-team/capacitor/issues/342#issuecomment-434563021 I think it could be really useful to switch quickly between environments.

[GuilhermeBCC]

See https://github.com/ionic-team/ionic-docs/issues/83

[dwieeb]

@GuilhermeBCC Yep, this should be ready to go for Ionic apps: https://beta.ionicframework.com/docs/cli/configuration#multi-app

It's not a super smooth process yet, but hopefully it's usable 😄

But, again, I doubt this feature will make it into Capacitor itself.

[GuilhermeBCC]

https://beta.ionicframework.com/docs/cli/configuration/#adding-an-app

This approach has a lot of problems.

In fact using this you are not creating a project in monorepo but rather a standard project in the wrong place.

The project is not added to ionic.config.json neither the angular.json and the project does not extend tsconfig.json from root .

[dwieeb]

@GuilhermeBCC Please create an issue in the Ionic CLI repo and we can discuss.

[GuilhermeBCC]

@dwieeb I think I do not need to, since Ionic 4 are just web components. I do not think there's a need for that anymore. Monorepo is already in Angular.

I'd like to test Capacitor or Cordova support (for Monorepo). I saw that the issue was closed. Is there already a way to do this?

[GuilhermeBCC]

Knowing better the capacitor I see that there is no need for this feature so I am closing this issue.

For those who arrive here I leave my conclusion.

Capacitor is great. In fact it is the differential of the original Ionic3 framework. Ionic3 (great) was divided into Ionic 4 (cool) and Capacitor (great).

To work with Monorepo:

1. Install @capacitor/cli (in root project)
2. Create a new project called Myproject_android (by example) with the Capacitor cli;
   2.1. Use the npx @capacitor/cli create command to create
   2.2. Next command execute in project folder (Myproject_android)
3. Add an android project: npx cap add android
4. Build your original project (Web?) And move the output (www) to the www folder of Myproject_android;
5. If there are Cordova plugins add them to the package.json of the project Myproject_android and run npm install.
6. Sync with Android project: npx cap sync
7. Open on Android Studio (npx cap open android) and build it for your device.

Very easy.

Thanks @dwieeb for your time and patience

[matheo]

@GuilhermeBCC I just found that it's possible!
and indeed, capacitor needs to do nothing, it all on ionic!

With this config:

{
  "defaultProject": "my-ionic",
  "projects": {
    "my-ionic": {
      "name": "my-app",
      "type": "angular",
      "root": "apps/my-ionic",
      "integrations": {
        "capacitor": {}
      }
    }
  }
}

and having apps/my-app/capacitor.config.json we're able to run the ionic capacitor commands like ionic capacitor run android --livereload --address=0.0.0.0!

Awesome stuff!

[cubicleWar]

@GuilhermeBCC while capacitor can work with multi-project repo's it is a bit cumbersome to set up and requires the plugin to be installed via npm at both the root and app levels otherwise plugins will not be automatically imported into the native app. This voids some of the benefits of the monorepo approach.

It would be great if capacitor supported the --project and then searched root node_modules folder for plugins to import into that native project.

Alternatively the apps/app/capacitor.config.json could be used to specify which node_modules folder to search for plugins.

[jiriKralovec]

Knowing better the capacitor I see that there is no need for this feature so I am closing this issue.

For those who arrive here I leave my conclusion.

Capacitor is great. In fact it is the differential of the original Ionic3 framework. Ionic3 (great) was divided into Ionic 4 (cool) and Capacitor (great).

To work with Monorepo:

1. Install @capacitor/cli (in root project)
2. Create a new project called Myproject_android (by example) with the Capacitor cli;
   2.1. Use the npx @capacitor/cli create command to create
   2.2. Next command execute in project folder (Myproject_android)
3. Add an android project: npx cap add android
4. Build your original project (Web?) And move the output (www) to the www folder of Myproject_android;
5. If there are Cordova plugins add them to the package.json of the project Myproject_android and run npm install.
6. Sync with Android project: npx cap sync
7. Open on Android Studio (npx cap open android) and build it for your device.

Very easy.

Thanks @dwieeb for your time and patience

This is not easy. This is incredibly inefficient approach. Moreover, it completely defeats the whole purpose of mono-repos. I don't want to manage packages all around my repository, I want to have them centralized...

[Coly010]

@dwieeb Following on from what @jiriKralovec has said, Nx Workspaces provides a monorepo solution that does not place a package.json within the app folder.
Due to this we get the following error:

[error] Capacitor needs to run at the root of an npm package.
Make sure you have a "package.json" in the directory where you run capacitor.

When we run ionic capacitor  commands in a multi-app ionic project with config such as:

{
  "defaultProject": "test-mobile-poc",
  "projects": {
    "test-mobile-poc": {
      "name": "My App",
      "integrations": {
        "capacitor": {}
      },
      "type": "angular",
      "root": "apps/test-mobile-poc"
    }
  }
}

Are there any properties we need to add to either the ionic.config.json or the capacitor.config.json files that will bypass the check for capacitor running at root level?
Even if you execute the command ionic capacitor <command> from the root of the monorepo, the error above occurs.
Here is my capacitor.config.json which is sitting at apps/test-mobile-poc level:

{
  "appId": "io.ionic.starter",
  "appName": "My App",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {}
}

If there is additional work required to allow this to work, I'll gladly open a PR for it if I can figure it out.
cc @mhartington @mlynch

EDIT:
I've also noticed that using ionic capacitor add ios will add the @capacitor/ios dependency to the root package.json even if one exists in the app subfolder, and then trying to run ionic capacitor run ios will error with the following:

[ERROR] The project's package.json file seems malformed.

[eduardoRoth]

@Coly010

Not the best way, but a 'fix' to make capacitor work in a monorepo (I'm using Nx):

1. cd to the app folder (e.g. apps/native-app) and create a package.json file with the following:
   package.json

{
  "name": "app-native-name",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {},
  "devDependencies": {}
}

1. Then install capacitor npm install --save @capacitor/core @capacitor/cli. (I know, this kills the main reason to use a monorepo, but in the meantime, just update your .gitignore and /node_modules to node_modules)

2. Run npx cap init, this creates a capacitor.config.json file for the project

3. Modify capacitor.config.json``webDir property according to the path of the app dist folder (e.g. "webDir": "../../dist/apps/native-app")

4. Add the required platforms:

5. npx cap add android
6. npx cap add ios

That's it for the install process!

When you want to run the app you'll have to:

1. From root of the monorepo, run ng build app-native (or the name of your project)
2. cd to the app folder (e.g. cd apps/native-app)
3. In the same folder, run npx cap copy android (or ios)
4. In the same folder, run npx cap run android(or ios)

Hope this helps!

[eduardoRoth]

@mhartington @mlynch ; I'll try to make some time this weekend and create a PR with support for monorepos with the previous steps.

[Coly010]

@eduardoRoth I managed to get this set up in Nx with the capacitor deps at the root package JSON.

I did have to create a package.json in the app-specif directory, however, I only needed the following:

{
  "name": "my app"
}

Although the capacitor config and all cap commands must be run within that app directory also.

[eduardoRoth]

@Coly010 , if I don't install capacitor in the local folder, I get this error:

Probably you have capacitor installed globally.
Edit: Or I'm doing something wrong haha 😅

[eduardoRoth]

Following @matheo comment, you can use ionic cli:

This is the structure of my project (created a new one)

ionic.config.json file

{
  "projects": {
    "native": {
      "name": "native",
      "integrations": {},
      "type": "angular"
    }
  }
}

You'll need to install capacitor as usual:
npm install --save @capacitor/core @capacitor/cli

Then run
ionic capacitor add android --project="native"

It'll create the capacitor.config.json file and then fail! Haha It's because it doesn't find the www folder

Update capacitor.config.json to set the new webDir folder to the right path: "webDir": "dist/apps/native",

Run ionic build --project="native"
Run ionic capacitor add android --project="native" and this time it'll work

Then you can copy or run the project
ionic capacitor copy android --project="native"
ionic capacitor run android --project="native"

Although, this creates a root capacitor.config.json and doesn't work for multiple apps.

Edit: I'm not even sure that the --project="native" does something because it adds the configuration for root. I'll take a look

[Coly010]

@eduardoRoth Yes, double checked my CD pipeline. Not installing the cap CLI globally, but I am using npx Ionic capacitor

Also, yes the multi-app setup works for a root ionic.config.json but I had to drop the capacitor.config.json into the local app folder