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
✔ Where would you like to create your workspace? · {your-workspace-name}
# Choose "None"
? Which stack do you want to use? …
None: Configures a minimal structure without specific frameworks or technologies.
# Choose "Integrated"
? Package-based or integrated? …
Integrated: Nx creates a workspace structure most suitable for building apps.Install the @nx/js plugin.
npm install @nx/js -DNow initialize -- This will ensure a tsconfig.base.json is created to begin building your workspace.
npx nx g @nx/js:initnpm install @nstudio/xplat -D
You are now ready to create apps:
npx nx g @nstudio/xplat:app
Potential schematics error: If you encounter a SchematicNameCollisionException issue, you can see this gist to apply a patch: https://gist.github.com/NathanWalker/a8554c1e0bba700affeb0c4672d26b0e
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:
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
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
nx g @nstudio/xplat:app mobile
choose
nativescript
A. iOS
npx nx run nativescript-mobile:ios
B. Android
npx 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