Cross-platform (xplat) tools for Nx workspaces
xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.
Currently supported platforms
- Electron
Build cross platform desktop apps with JavaScript, HTML, and CSS.
- Ionic
Build amazing apps in one codebase, for any platform, with the web.
- NativeScript
Build rich iOS and Android apps with direct access to native api's from JavaScript directly.
Quickstart
npx create-nx-workspace@latest
// Choose "Integrated monorepo" at the prompt:
? Choose what to create …
> Integrated monorepo: Nx configures your favorite frameworks and lets you focus on shipping features.
// Choose "apps" at the prompt:
? What to create in the new workspace …
> apps [an empty monorepo with no plugins with a layout that works best for building apps]
Install the tools:
npm i @nstudio/xplat -D
You are now ready to create apps:
npx nx g @nstudio/xplat:app
NOTE: If you encounter any issue, you can try creating an Nx workspace with version specified, for example:
npx create-nx-workspace@14.1.7
App generation examples
The additional app generators can be used as follows:
Electron
Electron app generator can use any web app in the workspace as it's target.
If you don't have a web app yet, create one first:
npx nx g @nstudio/xplat:app sample
choose web
You can now use the web app as the Electron target:
npx nx g @nstudio/xplat:app desktop --target=web-sample
choose electron
Develop with:
npm run start.electron.desktop
Ionic
npx nx g @nstudio/xplat:app sample
choose ionic
Develop in browser with:
npx nx serve ionic-sample
Build Ionic app:
npx nx build ionic-sample
A. Capacitor iOS - Prepare for development
npm run prepare.ionic.sample.ios
You can now open in Xcode for further development:
npm run open.ionic.sample.ios
B. Capacitor Android - Prepare for development
npm run prepare.ionic.sample.android
You can now open in Android Studio for further development:
npm run open.ionic.sample.android
NativeScript
nx g @nstudio/xplat:app mobile
choose nativescript
A. iOS
npx nx run nativescript-mobile:ios
B. Android
npx nx run nativescript-mobile:android
Documentation
Talks
Example repos for different scenarios
Context