@nstudio/web

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

npx create-nx-workspace@latest

At the prompts:

What to create in the new workspace

choose apps

npm i @nstudio/xplat -D

You are now ready to create apps:

nx g app

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:

nx g app sample

choose web

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

nx g app desktop --target=web-sample

choose electron

Develop with:

npm run start.electron.desktop

Ionic

nx g app sample

choose ionic

Develop in browser with:

nx serve ionic-sample

Build Ionic app:

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 app mobile

choose nativescript

A. iOS

nx run nativescript-mobile:ios

B. Android

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

Real world apps built with xplat

Portable North Pole

• Web: https://www.portablenorthpole.com/en/home
• iOS: https://itunes.apple.com/us/app/id902026228?mt=8
• Android: https://play.google.com/store/apps/details?id=com.ugroupmedia.pnp14&hl=en

My PreSonus

• Web: http://my.presonus.com/
• iOS: https://apps.apple.com/us/app/mypresonus/id1282534772
• Android: https://play.google.com/store/apps/details?id=com.presonus.mypresonus&hl=en_US

Sweet

• Web: https://sweet.io/
• iOS: https://apps.apple.com/us/app/sweet/id1452120535
• Android: https://play.google.com/store/apps/details?id=io.sweet.app&hl=en_US

Context

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

Contributing

Please see our guidelines for contributing.

NathanWalker	pegaltier	m-abs	sr3dna	mbaljeetsingh

dopsonbr	AgentEnder	davecoffin	dmitryr117	kamilmysliwiec	madmath03

miguelramos	n0mer

Changelog

13.4.1 (2021-12-30)

Features

• Nx 13.4.x compatibility (#288) (9716c64)