xplat is an added value pack for Nx which provides additional app generators and optional supporting architecture for different platform/framework combinations.
- 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.
npx create-nx-workspace@latest
At the prompts:
What to create in the new workspace
choose
apps
npm i @nstudio/xplat -D
You are now ready to create apps:
nx g 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
The additional app generators can be used as follows:
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:
nx g app sample
choose
web
You can now use the web app as the Electron target:
nx g app desktop --target=web-sample
choose
electron
Develop with:
npm run start.electron.desktop
nx g app sample
choose
ionic
Develop in browser with:
nx serve ionic-sample
Build Ionic app:
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
nx g app mobile
choose
nativescript
A. iOS
nx run nativescript-mobile:ios
B. Android
nx run nativescript-mobile:android
- Super Powered, Server Rendered Progressive Native Apps by Nathan Walker and Jeff Whelpley
- ngAir 172 - xplat (cross-platform) tools for Nx workspaces with Nathan Walker
- Ionic + Web: https://github.com/nstudio/xplat-sample-ionic-web
- Electron + Web with routing: https://github.com/nstudio/xplat-sample-electron-routing