Cross-platform (xplat) tools for Nx workspaces
![](https://raw.githubusercontent.com/nstudio/xplat/master/xplat-logo.png)
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
✔ Where would you like to create your workspace? · {your-workspace-name}
? Which stack do you want to use? …
None: Configures a minimal structure without specific frameworks or technologies.
? Package-based or integrated? …
Integrated: Nx creates a workspace structure most suitable for building apps.
Init workspace
Install the @nx/js plugin.
npm install @nx/js -D
Now initialize -- This will ensure a tsconfig.base.json
is created to begin building your workspace.
npx nx g @nx/js:init
Install the tools:
npm 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
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