Repository files navigation

xplat is an added value pack forNx 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.

Note: Nx 19.x.x compatible.

npx create-nx-workspace@19✔ Where would you like to create your workspace? · {your-workspace-name}# Choose "None"? Which stackdo 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 suitablefor building apps.

Install the @nx/js plugin.

npm install @nx/js -D

Now initialize -- This will ensure atsconfig.base.json is created to begin building your workspace.

npx nx g @nx/js:init

npm install @nstudio/xplat -D

You are now ready to create apps:

npx nx g @nstudio/xplat:app

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

chooseweb

You can now use the web app as the Electron target:

npx nx g @nstudio/xplat:app desktop --target=web-sample

chooseelectron

Develop with:

npm run start.electron.desktop

npx nx g @nstudio/xplat:app sample

chooseionic

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

choosenativescript

A.iOS

npx nx run nativescript-mobile:ios

B.Android

npx nx run nativescript-mobile:android

• Super Powered, Server Rendered Progressive Native Apps byNathan Walker andJeff Whelpley
• ngAir 172 - xplat (cross-platform) tools for Nx workspaces with Nathan Walker

• VS Code
• Nx Console for VS Code

• Ionic + Web:https://github.com/nstudio/xplat-sample-ionic-web
• Electron + Web with routing:https://github.com/nstudio/xplat-sample-electron-routing

• Why it's Hard to Decide on Technologies byAdam Klein