Site icon CodeARIV

How to Install and Set Up NativeScript 6.0 on Windows 10

nativescript-windows

At present we are in a world that is become very technical and modern. Things change every day and people are looking at different approaches for things. This applies everywhere and also in the technological world. A plethora of concept and new technology are coming up each day and one and to live up to it. Some of them make things much easier and one is the NativeScript.

Introduction

The NativeScript is something that is completely a cross-platform mobile application framework which works with the current technology trends like Angular, Vue.js, JavaScript and even Typescript if we prefer it.

It is a great tool and people love it for a reason that it is very simple to learn and that makes it a very good choice with all levels of people from beginner to an expert and hence this is a very popular option at present in the development world. One can easily master this if good knowledge of JavaScript, CSS, and there.

Also, one can easily access the complete list of APIs and we can reuse all the codes which are there and that makes the process very simple. One can very easily find plugging, templates, and application online without too many problems and that makes it a preferred choice.

It gives us a very good platform-native UI and we can adapt to run it anywhere without any problems. This can be made for UI to specific devices. This is one of the major reasons why an organization likes SAP using NativeScript.

NativeScript is backed by Progress which has got decades of experience in coding and that makes it a very good choice for one and all. There is lots of Mission-critical enterprise support in the market. This is completely open-source and hence you do not need to worry about buying it and hence it is a very good choice for one and all.



Installation

So let’s learn the steps in installing NativeScript on Windows 10. These installation steps are also applicable for Windows 7 or later OS versions.

1. Install Chocolatey

Chocolatey is a popular package manager for Windows. We can install all the packages and dependencies required to install NativeScript using Chocolatey. So at first, we need to install it on our system.

To install Chocolaty, Open Command Prompt with administrator privileges and run the command below.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2. Install Nodejs

Now we can install the LTS version of Nodejs using Chocolatey.

choco install -y nodejs-lts

3. Install JDK 8

NativeScript requires Java Development Kit(JDK) to be installed on our system. The recommended version is JDK 8 and this can be installed with the command below.

choco install adoptopenjdk --version 8.192

4. Install Android SDK

The next thing we want to install is the Android SDK and this can also be installed on our system using Chocolatey.

choco install -y android-sdk

5. Install the packages for Android SDK

So we have installed Android SDK in the previous step but it also requires some packages to be installed for with it. Install all packages for the Android SDK Platform 28, Android SDK Build-Tools 28.0.3 or later, Android Support Repository, Google Repository and any other SDKs that we may need. The below command will take care of it.

"%ANDROID_HOME%\tools\bin\sdkmanager" "emulator" "platform-tools" "platforms;android-28" "build-tools;28.0.3" "extras;android;m2repository" "extras;google;m2repository"

6.Install NativeScript CLI

NativeScript CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

It can simply be installed using NPM. So install the NativeScript CLI with the below command.

npm i -g nativescript

7. Check the system is configured properly

We can check that our system is configured properly to work with NativeScript projects.

tns doctor

If we see “No issues were detected” we can start working with NativeScript projects.

8.Creating new application

We can start creating a new NativeScript application with the below command.

tns create MyApp --template tns-template-blank

This will create a NativeScript project with the name MyApp.

9. Previewing the app

Now, the app we created can be previewed on our Android/iOS device with NativeScript Playground application.

For Android, we can download the app from Playstore.

NativeScript Playground app for Android

For iOS devices, the app can be downloaded from the App Store.

NativeScript Playground app from iOS

Download NativeScript Playground application from the respective stores first.

Now enter into our project directory and run tns preview.

cd MyApp
tns preview

This will generate a QR code.

Now just open NativeScript Playground app on our device and scan the QR code using it. Now we can preview the NativeScript app we have created on our device.

10. Running the App on Our Android Device

So we have created a NativeScript application and previewed it our device. But it has some limitations.

So tns run command allows us to build our app locally run on an Android/iOS device.

10.1 Setting Up Our Android Device

Because we are working on Windows OS, the app can only be run on an Android device.

For this, it needs to set up our mobile device first.

So from our Android device,

Go to Settings -> About

We can see a Build Version menu there. Continually click the option until it enables the Developer options

Now, return to Settings. we can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.

Note:- Alternatively we can set up a virtual android device on our system. It is explained in the below link.

Setting Up Android Virtual Device(AVD) on Windows 10

10.2 Check the Device is Configured Correctly

Connect our mobile device with our Windows system using the USB cable. Type the below command to verify whether our mobile device is connected or not.

tns device android

We can alternatively use adb devices to list all connected devices.

adb devices

If it shows our Android device on the list, go ahead with the next steps.

10.3 Run the App

Now we can run the app we created. So the below command will take care of it.

tns run android

Note:- This version of NativeScript also support HMR(Hot Module Replacement), a web pack feature which enables updating contents on the application screen without reloading the page.

So, to run our app with HMR facility, run the command below instead of tns run android.

tns run android --hmr

TechoTip: We recommend using Visual Studio code as the source-code editor for working with NativeScript projects.

Have a nice code !

Exit mobile version