I am extremely excited to announce the release of my new Nx plugin
@nxtend/ionic-react. With this plugin, it is easier than ever to develop Ionic React applications in an Nx workspace.
Background and Motivation
I have been a fan of both Ionic and Nx for a while now, so once both of these projects added React support, they seemed like a natural pair. However, when I attempted to convert an Nx React application, I quickly ran into issues. With the help of the community and the Nrwl team, we are now able to develop Ionic React applications in an Nx workspace. Over the last few weeks, I have been developing an Nx plugin to automate the generation of an Ionic React application, and I'm excited to finally share it.
@nxtend/ionic-react plugin to your Nx workspace is trivial, and works just like any other Nx plugin.
If you use the Angular CLI, run:
ng add @nxtend/ionic-react
If you use the Nx CLI and Yarn, run:
yarn add --dev @nxtend/ionic-react
If you use the Nx CLI and NPM, run:
npm install --save-dev @nxtend/ionic-react
Now, create your Ionic React application.
nx generate @nxtend/react:application myApp
Nx will ask you some questions about the application, but you can customize it further by passing these options:
I have had a great time working on this project, and I plan to immediately begin iterating on it.
One of the next features that I will be working on is the ability to generate a publishable Ionic React library. Currently, if Ionic components are used in a publishable
@nrwl/react library then it will error out. I believe that I have identified the issue, and will be testing a fix soon.
The Ionic CLI offers a
page schematic for Angular applications, so I intend to offer similar functionality for this plugin.
The Ionic CLI allows you to generate a new application with one of several starter templates. Over time, I intend to add support for each of these official templates.
@nxtend/ionic-react is just the beginning. I have plans for entirely new Nx plugins that I will publish under the
@nxtend scope, but you'll have to stay tuned for more information on that. 😁
I have had an amazing time working with Nx and schematics and I can't wait to iterate on this project. If anyone finds an issue with the project or has a suggestion, don't hesitate to file an issue on GitHub.
nxtend GitHub: https://github.com/devinshoemaker/nxtend
NPM Package: https://www.npmjs.com/package/@nxtend/ionic-react
Ionic Framework: https://ionicframework.com
Original GitHub Issue: https://github.com/nrwl/nx/issues/1931
Top comments (5)
Would be exited to see a @nxtend/ionic-angular ;)
That's not out of the question for the future 😄 I can't promise anything soon though, I have a lot in the pipeline right now!
Maybe this link helps in that direction: medium.com/@haleminh27/ionic-4-nes...
😎🚀 Would be very exciting to get everything running smoothly in a single monorepo! I gave your plugin a try and it works nicely so far. How would you go about adding capacitor support and target native ios and android in this setup?
Thanks! I have thought about this and I have plans to improve Capacitor support in Nx. It may be some effort on my end, I might have to try and contribute to Capacitor as well, but I'm not totally sure. I have gotten Capacitor working with a single app that I could make a schematic for, however, that doesn't help a TON in a monorepo workspace. My goal is to get this working as a first-class citizen eventually. 😁