Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Native 3
  • Overview
  • Transcript

2.3 Installing NativeScript and Creating a Project

In this lesson, I’ll walk you through the process of installing NativeScript on your machine. Then I’ll show you how to quickly bootstrap a new NativeScript project from the command line.

Related Links

2.3 Installing NativeScript and Creating a Project

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In this video, we will learn how to install NativeScript and create a project. The installation is simple enough as long as we have no JS installed. Additionally, we need to install the appropriate development kit for the platform we want to develop for. In the case of iOS, we need to have a Mac to install Xcode. If we are on a PC, we can only use Android. Sometimes installing the Android development kit can be tricky, but fortunately NativeScript has a setup script that we can use. If we look at the documentation, we can see the options for our install. Since I am on a PC, we will be installing the Android Development kit. The first thing we need to do is install Node.js. Many frameworks are installed by Node through NPM. Once you have it installed, we can start up a command prompt and install NativeScript. This command will install NativeScript globally. Now, once we have that, before we can add the Android platform to our project we need to install the Android Development kit. Like I said previously, they have included a PowerShell script that handles this process for us. All we have to do is paste this command into a command prompt. This script will download and install all of the dependencies needed to use Android for our project. Bear in mind that this script may take a while to complete. You can also find a similar script for OS X on this page. Now if you would like more control over this process, you can use Chocolatey, which is a package manager for Windows. Then if we look at the documentation for the advanced Windows setup, we can see the steps we can use to manually handle the process of configuring the Android SDK. I won't go into the steps of how this works, but I have included a link to the documentation in the course notes. Whichever method you choose to install Android, after that often complex process of configuring Android for Windows is finished. In order to test whether or not everything is installed correctly, we can use the NativeScript command line interface. Go to a command prompt and run tns doctor. This command will let you know if there are any problems with building for Android. If it says no issues were detected then you are good to go. Before we create our project let's run tns by itself. This will show all of the possible commands. Incidentally, we can also use NativeScript instead of tns to run our commands, as NativeScript is actually alias to tns. If we run a command with the help option, we can see the options that we have for that command. This shows the options that we have for creating our project. In this case, since we will be using Angular with our app, we can choose the Angular template. This will also install TypeScript for us. There are three versions of this command that we can use, but we will choose the third version. This will create our project name native demo. A folder to contain this project will be created with the same name. As we work with our project we will need to be in this folder. After we run this command, the project will be created. Let's take a moment to look at the files that make up our project. First of all, in the root of the project we have the package.json, reference.d.ts and the tsconfig.json files. First, package.json has info about our project, followed by dependencies and dev dependencies. Dependencies are necessary for the project to work, while dev dependencies are only needed as we develop our app. The reference file is a TypeScript definition file. Since TypeScript is compiled to JavaScript, the compiler doesn't understand the syntax of third party libraries. As a result, using these libraries will cause an error. Now, you may be wondering why we don't have a listing here for Angular 2. That is because the definition files are included with the Angular module. Then the tsconfig.json file handles how the TypeScript compiler behaves. Nothing we really need to change here, but take note that the experimental decorators and emit decorator metadata are needed to make Angular 2 work. Then we have the platforms folder which will hold any files that we need for the platforms that we add. This is also where our app will be located once we compile it. Then the node_modules folders is where the libraries we need for our app are located, including Angular 2. Then in the hooks folder, we have the scripts that handle the compilation and live synching of our project. Then finally, we have the app folder, where we will build our project with TypeScript and Angular 2. The app resources folder will hold any images that we add to our app, if we use this method to add images. We will discuss this in a later video. Then the app.css file holds styles that apply to the entire app. We will also discuss this in a later video. We have already discussed the app.component.ts and main.ts files in the last video. These files will be compiled to the app.component.js and the main.js files. And then finally, we have another package.json file. This is for the NativeScript app that we are building in the app folder, and contains information as well as dependencies and dev dependencies of the NativeScript project. You should now understand how to install NativeScript, set up your SDK and create a project. In the next video, we will look at some of the options for testing and debugging our apps.

Back to the top