Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nstudio/xplat
Cross-platform (xplat) tools for Nx workspaces.
https://github.com/nstudio/xplat
angular cross-platform electron ionic nativescript nx nx-workspaces xplat
Last synced: 3 days ago
JSON representation
Cross-platform (xplat) tools for Nx workspaces.
- Host: GitHub
- URL: https://github.com/nstudio/xplat
- Owner: nstudio
- License: mit
- Created: 2018-07-22T01:25:58.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T16:04:36.000Z (about 2 months ago)
- Last Synced: 2024-10-29T17:28:55.995Z (about 2 months ago)
- Topics: angular, cross-platform, electron, ionic, nativescript, nx, nx-workspaces, xplat
- Language: TypeScript
- Homepage:
- Size: 7.67 MB
- Stars: 367
- Watchers: 28
- Forks: 52
- Open Issues: 69
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Cross-platform (xplat) tools for Nx workspaces
[]()
[](https://www.npmjs.com/@nstudio/schematics)
**xplat** is an added value pack for [Nx](https://nrwl.io/nx) which provides additional app generators and optional supporting architecture for different platform/framework combinations.
## Currently supported platforms
- [Electron](https://electronjs.org/)
> Build cross platform desktop apps with JavaScript, HTML, and CSS.
- [Ionic](https://ionicframework.com/)
> Build amazing apps in one codebase, for any platform, with the web.
- [NativeScript](https://www.nativescript.org/)
> 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.
```
### Init workspace
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
```
### 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
- [Getting Started](https://nstudio.io/xplat/getting-started)
- [Fundamentals](https://nstudio.io/xplat/fundamentals)
- [API Documentation](https://nstudio.io/xplat/api)
- [Design Doc](https://t.co/z2lRxOBFAg)
- [Wiki](https://github.com/nstudio/xplat/wiki/FAQ)
## Talks
- [Super Powered, Server Rendered Progressive Native Apps](https://www.youtube.com/watch?v=EqqNexmu3Ug) by [Nathan Walker](http://github.com/NathanWalker) and [Jeff Whelpley](https://github.com/jeffwhelpley)
- [ngAir 172 - xplat (cross-platform) tools for Nx workspaces with Nathan Walker](https://www.youtube.com/watch?v=0I8D25nab5c)
## Recommended extra tooling
- [VS Code](https://code.visualstudio.com/)
- [Nx Console for VS Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
## 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](https://medium.com/@adamklein_66511/why-its-hard-to-decide-on-technologies-9d67b6adf157) by [Adam Klein](https://github.com/adamkleingit)