Project Structure

Quick intro

In the previous chapter, we were able to create our Ionic app using a predefined template, which we will be using as the base for the solution we’ll be working on throughout this book.

In order to make things fun, I thought of creating an app that would allow us to browse and search through the Succinctly series library, as well as organize the books into learning paths. So that’s the app we’ll be building—let’s get started!

The \src folder

Now that we’ve looked at how we can deploy and test our app on Ionic Pro, let’s focus on the app structure and the code that was created for us by the Ionic CLI. So open up VS Code in order to explore the folder structure.

The \src folder is where we’ll be spending most of our time when developing any Ionic-Angular application. Here’s where any initialization code goes.

Within the \src folder is where all the application’s source files are found, including images, styles, HTML markup, and code files (such as TypeScript or JavaScript). By default, the \src folder is organized as follows.

Figure 2-a: The App’s \src Folder Structure

Let’s quickly go over this structure in order to understand how things have been organized. The \src folder is split into various subfolders, each with a defined purpose.

The \src\app folder

The \src\app folder contains the application’s main module and component. Ionic applications are organized into modules that use one or more components.

Within the \src\app folder, main.ts is the entry point for our Ionic application—it is responsible for importing the app’s main module, which corresponds to app.module.ts. We can see this in the following code listing.

Code Listing 2-a: main.ts

Within app.module.ts, there are references to the app’s main component, app.component.ts, and to the two predefined pages that our application has—the Home and List pages. We can see this as follows.

Code Listing 2-b: Component References in app.module.ts

Here comes the interesting part—the app’s main component, app.component.ts, is actually associated with two other files: app.html and app.scss, which correspond to the application’s main view and style, respectively. The app.scss file is used for setting styling rules that apply to the application in general; you can find more information here.

If we open app.component.ts, we can see that it references app.html as its view template—as follows.

Code Listing 2-c: app.component.ts Referencing app.html

So you can think of the /\src/\app as the repository that contains the application’s main component—and the module loads it, which references the rest of the app’s parts.

The \src\assets folder

This folder basically contains static assets, such as icons and images that the application will use. By default, it contains an \icon folder that includes the app’s favicon and a \imgs folder that contains the app’s logo. Here we can add any assets that our application will use.

The \src\pages folder

As its name clearly implies, this folder contains the navigation pages our application actually uses.

Each navigation page has a separate subfolder. By default, the template that was created by the Ionic CLI has two pages: one called home, and the other called list—respectively found under the home and list folders.

Under each of these subfolders, each navigation page is actually made up of several files: an HTML (.html), a style sheet (.scss), a TypeScript component (.ts) code file, and most recently, a TypeScript (.module.ts) code file.

Let’s have a look at home.ts—you should be able to see code similar to the following.

Code Listing 2-d: home.ts

Notice that because Ionic-Angular is a very quickly evolving framework, the Ionic team is always incorporating the latest Angular framework changes into Ionic-Angular, so it is possible that between small updates to the Ionic CLI—when you scaffold a new project—the out-of-the-box code might look slightly different to what is listed in the previous code listing.

So it is possible that the scaffolded code for home.ts might instead look similar to the following one. In my case, the CLI has scaffolded the code for home.ts as follows.

Code Listing 2-e: Another Possible Version of home.ts

Ionic apps follow the Model-view-controller (MVC) design pattern. As we can see, a reference to home.html is found within home.ts. The HTML file represents the home page’s view, while the TypeScript file (home.ts) is the controller, which contains the Angular component.

The Angular component is represented by the HomePage class, which has a constructor that receives an Ionic NavController object as a parameter. You can find more information about the NavController class here.

The style sheet (.scss) file is specific to the view, and it is compiled down to CSS by Ionic when the application is built.

The \src\theme folder

Next on our list is the \src\theme folder, which defines the Ionic theming used by the application. We don’t need to touch this folder or the variables.scss file unless we want to use a different theme—you can find more information about this topic here.

The files within the \src folder

The last part of the \src folder that we need to talk about is regarding the files that reside in its root, which are: index.html, manifest.json, and service-worker.js.

As you would expect, the index.html file defines the runtime entry point to the Single Page Application (SPA) that contains the entire Ionic app. In essence, what Ionic does is create an SPA that is then transformed into a native mobile app when deployed to iOS or Android.

The reason there’s a manifest.json file is that with Ionic, the apps we build are by default easily upgradable to Progressive Web Apps (PWAs).

This means that even if the app is not compiled into a mobile app for a specific platform, it can still be installed on the home screen of the mobile device as a PWA.

This requires that we use a web manifest file. Our manifest file looks like this.

Code Listing 2-f: manifest.json

This manifest file is then tied up with the app’s main runtime entry point, the index.html file, as follows.

Code Listing 2-g: The index.html Referencing the manifest.json File

The service-worker.js file is like any other JavaScript file, with the exception that it runs in the background and is triggered via events—this is what is known as a Service Worker.

Service Workers are incredibly powerful, and honestly, incredibly confusing to some extent. They provide the app’s offline functionality, push notifications, background content updating, caching, and other background features. At a high level, they run behind the scenes, independently of the app, in response to various events like network requests, push notifications, and connectivity changes.

The service-worker.js file created by the Ionic CLI provides a basic structure for how to organize these types of tasks—you can find more information about this topic here.

If you would like to better understand Ionic’s philosophy for enabling PWAs out of the box, I recommend you read this excellent blog post, which explains it all.

The \node_modules folder

This folder contains the Node.js packages that the application uses—which were installed when we ran the npm install command. These packages are specified within the package.json file found on the app’s root folder.

The \www folder

This folder is where Ionic will deploy the application once it has been transpiled and built.

The \ (root) folder

The app’s root folder contains some very important files, without which the application wouldn’t be able to do much.

The package.json file contains the name of the Node.js modules that the app uses, whereas files such as tsconfig.json and tslint.json contain general TypeScript configuration and linting settings, respectively. Linting is the process of checking TypeScript or JavaScript code for readability, maintainability, and functionality errors.

Other files in the root folder, such as .gitignore, .editorconfig, and ionic.config.json, provide essential configuration settings that are specific for Git, editing, and Ionic, respectively.

Finally, the package-lock.json file is automatically generated for any operations where the Node Package Manager (NPM) modifies either the \node_modules folder, or the package.json file.

The purpose of the package-lock.json file is to describe the exact folder tree that was generated, so that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates. You can find more information here.

Summary

With the project structure covered, we are now ready to start exploring Ionic’s navigation system, and later, its components—which are both essential in order to start making the necessary modifications to our application.

Sounds exciting! So let’s not wait any longer, and start exploring Ionic’s navigation system in order to kickstart our app.