How to run ionic capacitor app from nx monorerepo in live reload mode

So capacitor app in the nx monorepo could have such folder structure:

The current implementation of ionic and capacitor cli are not working out of the box with nx monorepos. You can’t just run in terminal ionic capacitor run --livereload neither from root folder nor from /apps/awesome-app

I didn’t find a fancy way to replace ionic capacitor run -- livereload command completely. But there are a couple of workarounds that could be in help.

So you can manually run commands like npm run build then npx nx run yor-awesome-app:sync then manually open ide (e.g. Android Studio or Xcode) or npx nx run yor-awesome-app:open:android and run app from ide.

It doesn’t bring live reload as we want.

Also, at the moment the major drawback for using @nxtend — it has Angular 13 in it’s peer deps list, while the latest Angular is v14. And Node.js starting from v16 will fail to install/uninstall any package due to peer deps conflict. Of course, you may use npm install — legacy-peer-deps or use “overrides” in package json.

But let's try another approach

First of, it’s not necessary to use @nxtend/capacitor at all.
Within nx monorepo it’s possible to configure app’s project.json (apps/awesome-app/project.json) using nx:run-commands executor with code like this:

So now it’s possible to sync capacitor app by running nx run awesome-app:sync:android

Running capacitor sync or capacitor copy commands copies the app’s root config file to ios and android folders accordingly.
To run my capacitor app I have a simple package.json script

The command runs capacitor copy and copies configs. LIVE env and root config add some magic. The second command opens the ide where I still need to run the app manually. The third command serve app (for example an Angular serve comes with live reload by default)

The code in capacitor.config.json removes some manual routines:

And voila — after the serve command compiles the app — you can run the app from the Android Studio (or Xcode) and after any change to JavaScript code will be made — the app will be reloaded in the emulator or device.

Related posts:

We use modules to separate our application code into separate units, each of which represents a specific functionality. Modules also allow us to reuse code and integrate features across a variety of…

A short poem inspired by the cute, tiny birdie each day in my tree - by thegreensofa.

Here at Tracking n Hacking, we’re obsessed with SaaS. We love trying out new products, and we also know how important SaaS tools can be for SaaS startups. When faced with the trials and tribulations…