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
Top comments (2)
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
And after that i just want to execute this command
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
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.