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

``sh
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.
`

$3

Install the @nx/js plugin.

`sh
npm install @nx/js -D
`

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

`sh
npx nx g @nx/js:init
`

$3

`
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:

$3

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
`

$3

`
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
`

$3

`
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

- Getting Started
- Fundamentals
- API Documentation
- Design Doc
- Wiki

Talks

- 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

Recommended extra tooling

- VS Code
- Nx Console for VS Code

Example repos for different scenarios

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

Context

- Why it's Hard to Decide on Technologies by Adam Klein