Build Cross-Platform Applications in a Monorepo with Nx, Ionic, and Capacitor

Background and Motivation

A few months ago I released an Ionic React plugin for Nx. While I really enjoy using Ionic for its comprehensive component library, the project is not nearly as complete without Capacitor.

Capacitor is developed by the Ionic team but it does not require an Ionic project. Capacitor is framework agnostic and should work with any app in an Nx workspace. If you would like to learn more about Capacitor then I suggest you check out the official documentation.

@nxtend/ionic-react enabled developers to create web apps that looked native, @nxtend/capacitor enables developers to compile their web apps to a native platform such as iOS and Android.

Usage

While the officially Capacitor CLI does not work well with an Nx workspace, I have tried to match the functionality with the plugin as much as possible.

Generate Ionic React App with Capacitor

First, you need to initialize the @nxtend/ionic-react plugin:

# Angular CLI
ng add @nxtend/ionic-react

# Nx CLI

# npm
npm install --save-dev --exact @nxtend/ionic-react

# yarn
yarn add --save-dev --exact @nxtend/ionic-react

nx generate @nxtend/ionic-react:init

Once the plugin has been added to your Nx workspace you can generate an Ionic React application with Capacitor:

nx generate @nxtend/ionic-react:application {Ionic React application name} --capacitor true

nx generate @nxtend/ionic-react:application mobile-app --capacitor true

The @nxtend/capacitor plugin will be added to your workspace and a Capacitor project will be automatically generated with a new @nxtend/ionic-react application if you do not specity the --capacitor flag. However, you can alsoadd Capacitor to an existing project.

Add Capacitor to Existing Project

First, you need to initialize the @nxtend/capacitor plugin:

# Angular CLI
ng add @nxtend/capacitor

# Nx CLI

# npm
npm install --save-dev --exact @nxtend/capacitor

# yarn
yarn add --save-dev --exact @nxtend/capacitor

nx generate @nxtend/capacitor:init

Once the plugin has been added to your Nx workspace you can generate a Capacitor project from an existing frontend project:

nx generate @nxtend/capacitor:capacitor-project {Capacitor project name} --project {frontend project name}

nx generate @nxtend/capacitor:capacitor-project mobile-app-cap --project mobile-app

Add Native Platforms

Now that a Capacitor project has been added to your Nx workspace you can begin adding support for native platforms. Currently, Capacitor supports Android and iOS with Electron support being in beta.

nx run {Capacitor project name}:add --platform {native platform}

nx run mobile-app-cap:add --platform android

Sync Native Platform

Running the sync command will update the native platform dependencies and copy a build of your frontend project to the Capacitor project:

nx run {Capacitor project name}:sync --platform {native platform}

nx run mobile-app-cap:sync --platform android

Open Native Platform

Finally, you can open the native platform:

nx run {Capacitor project name}:open --platform {native platform}

nx run mobile-app-cap:open --platform android

Conclusion

The @nxtend/capacitor plugin enables any project in an Nx workspace to be compiled to a native platform. Combined with @nxtend/ionic-react you can create high-quality cross-platform applications in an Nx monorepo.

I highly recommend looking at the official Capacitor documentation for more information.

Resources

Ionic Framework
Capacitor
@nxtend/ionic-react
@nxtend/capacitor

Comments

[derHodrig]

Hello,
I really enjoy your guide, but i got a problem.
I have an existing nx monorepo with a single angular app. So i followed your guide from the point "Add Capacitor to Existing Project"

I run this command

nx generate @nxtend/capacitor:capacitor-project acs-capacitor --project acsweb

And after that i just want to execute this command

nx run acs-capacitor:add --platform android

but i ran into an error. It seems this command can not find "my-cap-app". In my Git tool i saw, that the only changes are made to angular.json, package.json, .gitignore and capacitor.config.json

So there is really no my-cap-app project.

Did i something wrong?

capacitor.config.json

{
  "appId": "io.q-soft.capacitor",
  "appName": "ACS-Capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "../../dist/apps/acsweb",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

[Ruan]

Thank you Devin,
Thanks for the time and effort it took you to write this.
It really, really helped me and I'm sure many other people.