NativeScript Plugin for Nx

Table of Contents

• Getting started
  • Create a new Nx workspace
  • Install NativeScript plugin
  • Create an app
    • --framework [angular]
    • --groupByName
  • Develop on simulators and devices
  • Release build
  • Test/lint the app
• Create NativeScript library
  • --groupByName

Getting started

Create a new Nx workspace

npx create-nx-workspace --cli=nx --preset=empty

Install NativeScript plugin

# Using npm
npm install --save-dev @nativescript/nx

# Using yarn
yarn add -D @nativescript/nx

Create an app

npx nx g @nativescript/nx:app <app-name> [...options]

This will generate:

apps/nativescript-<app-name>

The NativeScript Nx plugin will prefix apps by default to help distinguish them against other apps in your workspace for clarity.

--framework [angular]

Use this option to create a specific frontend framework integration app.

By default a "vanilla" NativeScript app will be generated using xml view files.

This setting will be saved with plugin settings the first time it's used to automatically choose this frontend framework integration for subsequent usages and with other generators without having to specify the flag again.

--groupByName

If you prefer you can also provide a flag to suffix instead:

npx nx g @nativescript/nx:app <app-name> --groupByName

This will generate:

apps/<app-name>-nativescript

Develop on simulators and devices

Android:

npx nx run <app-name>:android

iOS: (Mac only)

npx nx run <app-name>:ios

Release build

Android:

npx nx run <app-name>:android:build

iOS: (Mac only)

npx nx run <app-name>:ios:build

Test/lint the app

npx nx run <app-name>:test
npx nx run <app-name>:lint

Create NativeScript library

You can create a library of NativeScript components or plugins or whatever you'd like.

npx nx g @nativescript/nx:lib buttons

This will generate a nativescript-buttons library where you could build out an entire suite of button behaviors and styles for your NativeScript apps.

import { PrimaryButton } from '@myorg/nativescript-buttons';

The NativeScript Nx plugin will prefix libraries by default to help distinguish them against other apps and libraries in your workspace for clarity.

--groupByName

If you prefer you can also provide a flag to suffix instead:

npx nx g @nativescript/nx:lib buttons --groupByName

Which would generate a buttons-nativescript library.

import { PrimaryButton } from '@myorg/buttons-nativescript';