Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 NativeScript Project Structure

In this lesson, I'll show you some of the basics of NativeScript app projects. You'll get a look at project folder structures and resource management in NativeScript.

2.4 NativeScript Project Structure

The folder structure of a typical NativeScript project is similar to this example. Based on the type of the project or template that you choose, you may see that you have more folders. app folder is the heart of the application and all development resources are under this folder. He would spend majority of your time working with the files in here. node_modules contains all NPM module dependencies. All NativeScript projects have at least one dependency, and that is tns-core-modules tns-core-modules is the module that contains all NativeScript features that if you're going to use to build apps like camera, http calls, file system and so forth. We have some examples in upcoming videos. Platforms is a folder that contains the platform specific code for NativeScript to build apps on Native iOS and Android. They can consider the platforms folder as generated code for Android or iOS. And remember, on Windows, you don't have access to iOS platform. And if you're using a source control management system like Git, you can put this folder in your .git ignore file. package.json. This file has all your application's details, like NativeScript version, FID, and NPM dependencies. Okay, now let's discover what is inside the app folder. App_Resources. This folder contains platform-specific resources, such as icons, splash screens and configuration files. The NativeScript CLI takes care of injecting these resources into the appropriate places in the platforms folder when you execute tns run. As you can see, there are the Native Android and iOS folder structure and if you are already familiar with Native application development, you probably have seen these folders before. App.js. This file is the starting point of your application, and as you can see, it initializes the application. App.css. This file contains the global styles in your application, but we will talk about styling in details in upcoming videos. Next, let's start to restructure this blank template according to our app's requirement. To do so, l need two new folders. The first is views, which contains the code to build h subview and also l have to say, each view is consisted of a XML file, JavaScript and potentially a local SL file. For this project, we have three views, login, profile, repost. And next, we need another folder for files that are going to be shared across the app, like the config or. Now we can remove a main-page.js and main-page.xml files which are unnecessary. Finally, before we move on the next video, I have to say we can use a global directory for images. And to keep it simple, we are going to use this convention in this course.

Back to the top