Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Build a PWA, an iOS App, and an Android App From One Codebase (1 of 2)

DZone's Guide to

How to Build a PWA, an iOS App, and an Android App From One Codebase (1 of 2)

In this first part of this two part article, we set up our dev environment, and explain how Angular and NativeScript can work together.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

I have a long history of choosing between web and native, often wrongly. I’ve built web apps that were scrapped for native apps, and I’ve wasted time building native apps that found no audience.

In my current job as a mobile-focused developer advocate at Progress, I talk to developers that regret their web or native decision every week. Sometimes you don’t realize you need a native app until you hit the limitations of the web, and conversely, sometimes you realize a web app meets your needs only after you’ve gone through the lengthy process of building multiple native apps.

The good news is JavaScript developers no longer have to make this difficult choice. Through the use of the recently announced NativeScript and Angular integration, it’s now quite easy to build a PWA (Progressive Web App), a native iOS app, and a native Android app from one codebase.

running

In this article, I’ll show you how it works. You’ll learn how to build for all three platforms, as well as some tips and tricks I learned from going through this process myself.

What You’re Building

Over the last month, I built a Pokémon-based checklist app and deployed it to Google Play, the iOS App Store, and the web. The app is a purposely simple app designed to help teach how the NativeScript and Angular technology stack work.

apps

For this article, I’ll walk you through building a similar checklist-style app that looks like this.

selecting

Feel free to follow along as a way of starting your own code-sharing application, or to just browse the code to get a high-level idea of how this whole process works.

Starting Your App

When you’re ready to build, your first step is to install the Angular CLI, NativeScript CLI, and NativeScript schematics, all of which are available on npm. Open your terminal or command prompt and run the following commands.

npm install -g @angular/cli
npm install -g nativescript
npm install -g @nativescript/schematics

Here’s what these tools do.

  • The Angular CLI is a command-line interface for building and running Angular apps.
  • NativeScript is an open-source framework for building iOS and Android apps with JavaScript or TypeScript. The NativeScript CLI is a command-line interface for creating and running NativeScript apps.
  • NativeScript schematics is an Angular CLI extension that adds the ability to do NativeScript-related things. As you’ll see in a minute, this is what makes it possible to run your Angular apps on iOS and Android.

With installation out of the way, your next step is to create an app. To do that, run the following command from your terminal or command prompt.

ng new Checklist --collection @nativescript/schematics --shared --sample

Let’s break down what’s happening here.

  • ng new is the Angular CLI command you use to start new Angular apps.
  • Checklist is your app name. For your own apps, you’ll want to provide your own value here.
  • The --collection @nativescript/schematics flag tells the Angular CLI about NativeScript schematics, which makes it possible for this app to run on iOS and Android through NativeScript.
  • The --shared flag tells NativeScript schematics you wish to start with a code-sharing project template.
  • The --sample flag tells NativeScript schematics to scaffold a few sample components. You’ll probably want to omit this flag when you go to build your own apps.

Now that you have an app let’s look at how to run it.

Running Your App

First, cd into the new app you just built.

cd Checklist

Next, run npm install to install your app’s required dependencies.

npm install

From here there are three different commands you can use to run your app.

First, ng serve is how you run your newly created app on the web. Go ahead and run this command from your terminal or command prompt.

ng serve

After that command finishes, you’ll see a message about an Angular Live Development Server listening.

terminal

If you follow the instructions and visit localhost:4200 in your browser you’ll see the default web app running, which is a simple master-detail app showing soccer players.

default-web-app

If you’ve done any Angular development before this will feel very familiar, as it’s the same workflow you use to build Angular web apps—which is cool!

But you’re not building only for the web with this workflow, and the real magic happens when you bring NativeScript into the picture.

But before you run this app on iOS and Android there’s one warning I need to give: because NativeScript apps are truly native iOS and Android apps, there is an additional set of system requirements you need to install on your development machine to build these apps. Check out this page on the NativeScript docs for the necessary setup steps you’ll need to complete.

NOTE: The next version of NativeScript, NativeScript 5.0, has some fun changes that will allow you to run apps without any local setup. You can learn more on GitHub.

With the setup out of the way, return to your terminal or command prompt, use Ctrl + C to stop your ng serve command, and next execute npm run android. The command will take a minute to run, as under the hood NativeScript is building a completely native Android app. When it finishes you’ll see the following screen.

android-1

If you’re developing on macOS, you can also try running npm run ios, which runs through a similar process, but instead builds and starts your app on iOS. When it finishes you’ll see this screen.

ios-1

With a single codebase and a set of straightforward commands you now have the same app running in three places.

Cool, huh?

Now that you know how to run your app, let’s dig into your app’s code to see what’s going on.

Looking Through the Code

Starting at the root of your project, here are the top-level folders you need to know about.

Checklist/
├── App_Resources
├── platforms
└── src
  • The App_Resources folder is where NativeScript stores iOS and Android configuration files and image resources, such as your app’s icons and splash screens. Later in your app development, you’ll want to switch to your own image assets using the NativeScript CLI’s tns resources generate command.
  • The platforms folder is where NativeScript stores your generated iOS and Android apps; you can think of it as a dist folder for your native projects.
  • The src folder is where your source code lives, and it’s where you’ll be spending 95% of your time.

NOTE: There are a bunch of other configuration files in the root folder, such as an angular.json file for Angular CLI customization, a package.json file for managing dependencies, and a series of tsconfig.json files for configuring TypeScript. When getting started it’s best to leave these files alone; you can come back to them later and customize them to meet your project’s needs.

Since the src folder is where you’ll be spending most of your time, let’s dig into the contents of that folder in more detail.

src/
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.tns.html
│   ├── app.component.ts
│   ├── app.module.tns.ts
│   ├── app.module.ts
│   ├── app.routes.ts
│   ├── app.routing.tns.ts
│   ├── app.routing.ts
│   └── barcelona
│       └── ...
├── app.css
├── assets
├── index.html
├── main.tns.ts
├── main.ts
├── package.json
└── styles.css

If you’ve built Angular web apps before a lot of this structure will look very familiar. All Angular apps have a main.ts file for initialization, an app.module.ts file for module declarations, a series of app.routing.ts files for setting up routing, and an app.component.ts file to use as the app’s first component.

TIP: If you’re new to Angular and would like a more in-depth introduction to these concepts, check out the Angular quick-start tutorial. All of the concepts you learn there directly apply to this article’s code-sharing structure.

One concept unique to NativeScript’s code-sharing workflow is the .tns naming convention you see on some of your app’s files (for example app.routing.tns.ts).

By default, NativeScript schematics include all your project’s files in both your web and mobile apps—after all, you are trying to share code. However, in certain situations you will need to create web- and mobile-specific files, and that’s where the .tns extension comes in.

For example, take the app.module.ts and app.module.tns.ts files. When you run your app on the web, the Angular CLI uses your app.module.ts file as you’d expect. However, when you run your app on iOS or Android, NativeScript schematics instead grabs and uses your app.module.tns.ts file. This convention is a powerful way to split your web and mobile code as needed, and you’ll use it frequently as you build your own apps using this setup.

Now that you have a bit of background on how your project is structured, in our next article we'll build something new.

Tune back in tomorrow when we'll cover creating a web UI and iOS/Android apps!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web dev ,nativescript ,mobile application development ,pwa ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}