Convert Figma logo to code with AI

NativeScript logonativescript-cli

Command-line interface for building NativeScript apps

1,035
196
1,035
368
View on GitHubView on NPM

Top Related Projects

NativeScript's avatar

NativeScript

24,169

⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Dart (Flutter) and you name it compatible.

ionic-team's avatar

ionic-framework

50,896

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

facebook's avatar

react-native

118,109

A framework for building native applications using React

flutter's avatar

flutter

164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

quasar's avatar

Quasar

8,578

Remote Administration Tool for Windows

Quick Overview

NativeScript CLI is a command-line interface for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It provides a complete set of tools for developing, testing, and deploying cross-platform mobile applications using a single codebase.

Pros

  • Cross-platform development: Build iOS and Android apps from a single codebase
  • Native performance: Provides direct access to native APIs for optimal performance
  • Familiar technologies: Uses popular web technologies like Angular, Vue.js, and TypeScript
  • Large ecosystem: Extensive plugin library and active community support

Cons

  • Steeper learning curve compared to some other cross-platform frameworks
  • Limited UI components out of the box, may require additional plugins
  • Smaller community compared to React Native or Flutter
  • Debugging can be challenging, especially for platform-specific issues

Getting Started

  1. Install NativeScript CLI globally:
npm install -g nativescript
  1. Create a new project:
ns create MyApp --template @nativescript/template-blank-ng
  1. Navigate to the project directory:
cd MyApp
  1. Run the app on an emulator or connected device:
ns run android
# or
ns run ios

For more detailed instructions and documentation, visit the NativeScript website.

Competitor Comparisons

NativeScript logo

NativeScript

24,169

⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Dart (Flutter) and you name it compatible.

Pros of NativeScript

  • Core framework for building cross-platform mobile apps
  • Provides direct access to native APIs and UI components
  • Extensive plugin ecosystem for additional functionality

Cons of NativeScript

  • Steeper learning curve for developers new to mobile development
  • Larger codebase and more complex architecture
  • May require more frequent updates to keep up with native platform changes

Code Comparison

NativeScript (core framework):

import { Application } from '@nativescript/core';
import { AppModule } from './app.module';

Application.run({ moduleName: 'app-root' });
Application.cssFile = './app.css';

nativescript-cli:

const cli = require('nativescript');

cli.run({
  command: 'run',
  platform: 'android',
  bundle: true
});

Key Differences

  • NativeScript is the core framework for building apps, while nativescript-cli is a command-line tool for managing NativeScript projects
  • NativeScript focuses on app development and runtime, whereas nativescript-cli handles project creation, building, and deployment
  • The core framework requires more in-depth knowledge of mobile development concepts, while the CLI simplifies common development tasks

Use Cases

  • Use NativeScript when building the actual mobile application and implementing its features
  • Use nativescript-cli for project management, scaffolding, and deployment tasks during development
ionic-team logo

ionic-framework

50,896

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Pros of Ionic Framework

  • Larger community and ecosystem, with more plugins and third-party integrations
  • Better performance for web-based applications and progressive web apps (PWAs)
  • More comprehensive UI components and design system out of the box

Cons of Ionic Framework

  • Less native performance compared to NativeScript for complex, graphics-intensive apps
  • Limited access to native APIs without additional plugins or wrappers
  • Steeper learning curve for developers new to web technologies

Code Comparison

Ionic Framework (TypeScript):

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<ion-content>Hello Ionic!</ion-content>'
})
export class HomePage {}

NativeScript CLI (JavaScript):

const createViewModel = require("./main-view-model");

function onNavigatingTo(args) {
    const page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

Both frameworks offer different approaches to mobile app development. Ionic Framework is better suited for web developers and PWAs, while NativeScript CLI provides better native performance and direct access to platform APIs. The choice between them depends on the project requirements and the development team's expertise.

facebook logo

react-native

118,109

A framework for building native applications using React

Pros of React Native

  • Larger community and ecosystem, with more third-party libraries and resources
  • Better performance for complex, UI-heavy applications
  • Stronger backing from Facebook and industry adoption

Cons of React Native

  • Steeper learning curve, especially for developers new to React
  • More complex setup and configuration process
  • Less direct access to native APIs, often requiring additional bridges or modules

Code Comparison

React Native:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text>Hello, React Native!</Text>
  </View>
);

NativeScript:

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout>
    <Label text="Hello, NativeScript!" />
  </StackLayout>
</Page>

React Native uses JSX syntax and React components, while NativeScript uses XML-like markup for UI definition. React Native's approach may be more familiar to web developers, while NativeScript's syntax is closer to native mobile development paradigms.

Both frameworks allow for cross-platform mobile app development, but React Native has a larger community and more resources available. NativeScript offers a more native-like development experience and easier access to platform-specific APIs. The choice between the two depends on the developer's background, project requirements, and desired level of control over native functionality.

flutter logo

flutter

164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Pros of Flutter

  • Faster development with hot reload feature
  • More extensive widget library for UI components
  • Stronger community support and ecosystem

Cons of Flutter

  • Larger app size due to bundled runtime
  • Less native platform integration compared to NativeScript
  • Steeper learning curve for developers new to Dart

Code Comparison

Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello World')),
      body: Center(child: Text('Welcome to Flutter')),
    ),
  ));
}

NativeScript:

import { Application } from '@nativescript/core';

Application.run({ moduleName: 'app-root' });

// app-root.xml
<Page>
  <ActionBar title="Hello World" />
  <StackLayout>
    <Label text="Welcome to NativeScript" />
  </StackLayout>
</Page>

Flutter uses Dart and a declarative UI approach, while NativeScript uses JavaScript/TypeScript with XML-based layouts. Flutter's code is more concise for simple UIs, but NativeScript offers a structure closer to native development. Both frameworks aim to simplify cross-platform mobile development, with Flutter focusing on a unified codebase and NativeScript leveraging native APIs more directly.

quasar logo

Quasar

8,578

Remote Administration Tool for Windows

Pros of Quasar

  • Offers a more comprehensive UI framework with a large set of pre-built Vue.js components
  • Supports multiple build modes: SPA, SSR, PWA, and mobile/desktop apps
  • Has a more active community and frequent updates

Cons of Quasar

  • Steeper learning curve due to its extensive feature set
  • Less native performance optimization compared to NativeScript
  • Limited to Vue.js, while NativeScript supports multiple frameworks

Code Comparison

Quasar (Vue.js component):

<template>
  <q-page>
    <q-btn color="primary" label="Click me" @click="handleClick" />
  </q-page>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Handle button click
    }
  }
}
</script>

NativeScript (Vue.js component):

<template>
  <Page>
    <Button text="Click me" @tap="handleTap" />
  </Page>
</template>

<script>
export default {
  methods: {
    handleTap() {
      // Handle button tap
    }
  }
}
</script>

Both frameworks use Vue.js syntax, but Quasar utilizes its own UI components (q-page, q-btn) while NativeScript uses native UI components (Page, Button). Quasar's approach offers more consistent cross-platform styling, while NativeScript provides better native performance and platform-specific features.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


Nativescript Logo

NativeScript Command-Line Interface

The NativeScript CLI lets you create, build, and deploy NativeScript apps.

nativescript -> npm

Get it using: npm install -g nativescript

What is NativeScript

NativeScript provides platform APIs directly to the JavaScript runtime (with strong types) for a rich TypeScript development experience.

Some popular use cases:

  • Building Web, iOS, Android and Vision Pro apps with a shared codebase (aka, cross platform apps)
  • Building native platform apps with portable JavaScript skills
  • Augmenting JavaScript projects with platform API capabilities
  • AndroidTV and Watch development
  • watchOS development
  • Learning native platforms through JavaScript understanding
  • Exploring platform API documentation by trying APIs directly from a web browser without requiring a platform development machine setup.

To learn more about NativeScript, you can check the following resources:

Back to Top

How the NativeScript CLI works

The NativeScript CLI is the command-line interface for interacting with NativeScript. It incorporates several important services. Consider the following diagram:

NativeScript CLI diagram

  • Commands - pretty much what every CLI does - support of different command options, input validation and help
  • Devices Service - provides the communication between NativeScript and devices/emulators/simulators used to run/debug the app. Uses iTunes to talk to iOS and adb for Android
  • LiveSync Service - redeploys applications when code changes during development
  • Hooks Service - executes custom-written hooks in developed application, thus modifying the build process
  • Platforms Service - provides app build functionalities, uses Gradle to build Android packages and Xcode for iOS.

Back to Top

Supported Platforms

With the NativeScript CLI, you can target the following mobile platforms.

  • Android 4.2 or a later stable official release
  • iOS 9.0 or later stable official release

Back to Top

System Requirements

You can install and run the NativeScript CLI on Windows, macOS or Linux.

Installation

Install the NativeScript CLI

The NativeScript CLI is available for installing as an npm package.

In the command prompt, run the following command.

OSNode.js installed from https://nodejs.org/Node.js installed via package manager
Windowsnpm install nativescript -gnpm install nativescript -g
macOSsudo npm install nativescript -g --unsafe-permnpm install nativescript -g
Linuxsudo npm install nativescript -g --unsafe-permnpm install nativescript -g

To check if your system is configured properly, run the following command.

ns doctor

Configure Proxy Settings

If you are working with the NativeScript CLI behind a web proxy, you need to configure your proxy settings.

Set Proxy Settings

ns proxy set <Url> <Username> <Password>

Attributes

<Url> (Required) The full URL of the proxy. The <Url> attribute is required and if you do not provide it when running the command, the NativeScript CLI will prompt you to provide it. An example of a valid proxy URL is http://127.0.0.1:8888.
<Username> and <Password> (Optional) The credentials for the proxy. The <Username> and <Password> attributes are optional, however, if you choose to provide them, you must provide both.

Options

--insecure The --insecure flag allows you to perform insecure SSL connections and transfers. This option is useful when your proxy does not have a CA certificate or the certificate is no longer valid.

Limitations

Display Current Proxy Settings

ns proxy

Clear Proxy Settings

ns proxy clear

Back to Top

Quick Start

The Commands

Run ns help to view all available commands in the browser. Run ns help <Command> to view more information about a selected command in the browser. ns --help opens console help, where help information is shown in the console.

Back to Top

Create Project

To create a new cross-platform project from the default JavaScript template, run the following command.

ns create MyApp --js

To create a new cross-platform project from the default TypeScript, Angular or Vue template, use the template option followed by either typescript, angular or vue.

ns create MyApp --template typescript
ns create MyApp --template angular
ns create MyApp --template vue

Or you can simply use the shorthand tsc and ng options.

ns create MyApp --tsc
ns create MyApp --ng

With the template option you can also specify a local or a remote path to the template that you want to use to create your project. For example, if you want to create a React template, run the following command.

ns create MyApp --template https://github.com/shirakaba/tns-template-blank-react.git

The NativeScript CLI creates a new project and sets the application identifier to org.nativescript.myapp.

The CLI places the project in a new directory in the current directory. The newly created directory has the following structure.

MyApp/
├── app
│   ├── App_Resources
│   └── ...
└── platforms
    └── ...
  • The app directory is the development space for your application. You should modify all common and platform-specific code within this directory. When you run prepare <Platform>, the NativeScript CLI prepares relevant content to the platform-specific folders for each target platform.
  • The platforms directory is created empty. When you add a target platform to your project, the NativeScript CLI creates a new subdirectory with the platform name. The subdirectory contains the ready-to-build resources of your app. When you run prepare <Platform>, the NativeScript CLI prepares relevant content from the app directory to the platform-specific subdirectory for each target platform.

Back to Top

Develop Your Project

Development with NativeScript

For more information about working with NativeScript, see the following resources.

Development in app

The app directory in the root of the project is the development space for your project. Place all your common and platform-specific code in this directory.

In the app directory, you can use platform-specific files to provide customized functionality and design for each target platform. To indicate that a file is platform-specific, make sure that the file name is in the following format: name.ios.extension or name.android.extension. For example: main.ios.js or main.android.js.

You can develop shared functionality or design in common files. To indicate that a file is common, make sure that the file name does not contain a .android. or .ios. string.

Development in platforms

IMPORTANT: Avoid editing files located in the platforms subdirectory because the NativeScript CLI overrides such files.

Modifying Configuration Files

The NativeScript CLI respects any platform configuration files placed inside app/App_Resources.

Modifying Entitlements File (iOS only)

To specify which capabilities are required by your App - Maps, Push Notifications, Wallet etc. you can add or edit the app.entitlements file placed inside app/App_Resources/iOS. When building the project, the default app/App_Resources/iOS/app.entitlements file gets merged with all Plugins entitlement files and a new yourAppName.entitlements is created in the platforms directory. The path would be app/platforms/ios/<application name>/<application name>.entitlements and will be linked in the build.xcconfig file.

You can always override the generated entitlements file, by pointing to your own entitlements file by setting the CODE_SIGN_ENTITLEMENTS property in the app/App_Resources/iOS/build.xcconfig file.

Back to Top

Build Your Project

You can build it for your target mobile platforms.

ns build android
ns build ios

The NativeScript CLI calls the SDK for the selected target platform and uses it to build your app locally.

When you build for iOS, the NativeScript CLI will either build for a device, if there's a device attached, or for the native emulator if there are no devices attached. To trigger a native emulator build when a device is attached, set the --emulator flag.

IMPORTANT: To build your app for an iOS device, you must configure a valid certificate and provisioning profile pair, and have that pair present on your system for code signing your application package. For more information, see iOS Code Signing - A Complete Walkthrough.

Back to Top

Run Your Project

You can test your work in progress on connected Android or iOS devices.

To verify that the NativeScript CLI recognizes your connected devices, run the following command.

ns devices

The NativeScript CLI lists all connected physical devices and running emulators/simulators.

After you have listed the available devices, you can quickly run your app on connected devices by executing:

ns run android
ns run ios

Back to Top

Extending the CLI

The NativeScript CLI lets you extend its behavior and customize it to fit your needs by using hooks.

When you run one of the extendable commands (for example, ns build), the CLI checks for hooks and executes them. Plugins can also use hooks to control the compilation of the application package.

For more information, see the Extending the CLI document

Back to Top

Troubleshooting

If the NativeScript CLI does not behave as expected, you might be facing a configuration issue. For example, a missing JAVA path. To check if your system is configured properly for the NativeScript CLI, run the following command.

ns doctor

This command prints warnings about current configuration issues and provides basic information about how to resolve them.

If addressing the configuration issues does not resolve your problem, you can report an issue or ask the community.

Back to Top

How to Contribute

To learn how to log a bug that you just discovered, click here.

To learn how to suggest a new feature or improvement, click here.

To learn how to contribute to the code base, click here.

Back to Top

How to Build

git clone https://github.com/NativeScript/nativescript-cli
cd nativescript-cli
npm run setup

To use the locally built CLI instead of ns you can call PATH_TO_CLI_FOLDER/bin/ns. For example: PATH_TO_CLI_FOLDER/bin/ns run ios|android

Back to Top

Get Help

Please, use github issues strictly for reporting bugs or requesting features. For general NativeScript questions and support, check out Stack Overflow or ask our experts in the NativeScript community Discord channel.

Back to Top

License

This software is licensed under the Apache 2.0 license, quoted here.

Back to Top

NPM DownloadsLast 30 Days