DEV Community

Devin Shoemaker
Devin Shoemaker

Posted on • Edited on

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

#ionic #capacitor #nx #webdev

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
Enter fullscreen mode Exit fullscreen mode 
# 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
# Nx CLI

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

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

nx generate @nxtend/capacitor:init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
derhodrig profile image
derHodrig • • Edited

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
Enter fullscreen mode Exit fullscreen mode

And after that i just want to execute this command

nx run acs-capacitor:add --platform android
Enter fullscreen mode Exit fullscreen mode

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": {}
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dupiesdupreez profile image
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.

Read next

digitaldrreamer profile image

Running a Function When an #await Block resolves in Svelte(Kit)

Abdullah Bashir -

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

mcsee profile image

Code Smell 279 - Loop Premature Optimization

Maxi Contieri -

hanzla-baig profile image

How to Build a Advanced Portfolio with High-Level Features and Cutting-Edge Technologies for Web Developers and Designers 🚀🌟

Hanzla Baig -