How to Build a PWA, an iOS App, and an Android App From One Codebase (1 of 2)
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.
Join the DZone community and get the full member experience.Join For Free
A true open source, API-first CMS — giving you the power to think outside the webpage. Try it for free.
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.
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.
For this article, I’ll walk you through building a similar checklist-style app that looks like this.
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 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 newis the Angular CLI command you use to start new Angular apps.
Checklistis your app name. For your own apps, you’ll want to provide your own value here.
--collection @nativescript/schematicsflag tells the Angular CLI about NativeScript schematics, which makes it possible for this app to run on iOS and Android through NativeScript.
--sharedflag tells NativeScript schematics you wish to start with a code-sharing project template.
--sampleflag 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
cd into the new app you just built.
npm install to install your app’s required dependencies.
From here there are three different commands you can use to run your app.
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.
After that command finishes, you’ll see a message about an Angular Live Development Server listening.
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.
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
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.
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.
With a single codebase and a set of straightforward commands you now have the same app running in three places.
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
App_Resourcesfolder 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 generatecommand.
platformsfolder is where NativeScript stores your generated iOS and Android apps; you can think of it as a
distfolder for your native projects.
srcfolder 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.jsonfile for Angular CLI customization, a
package.jsonfile for managing dependencies, and a series of
tsconfig.jsonfiles 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.
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
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.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!
Published at DZone with permission of Tj VanToll , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.