Skip to content

nstudio/xplat

Repository files navigation

Cross-platform (xplat) tools for Nx workspaces

License NPM Version


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}

# 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.

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

Recommended extra tooling

Example repos for different scenarios

Context