Develop iOS, Android & Web apps from a single codebase
Tags: angular, web, android, ios
Published: 2018-10-01 21:09:02

---
title: Develop iOS, Android & Web apps from a single codebase
published: true
description: 
tags: angular, web, android, iOS
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7lyco15e0p0oyuufahvn.jpg
---

Setting up of the Angular project with both mobile and web app shared code is pretty simple process now. In the past, software developers had to create a minimum of two separate projects during the web and native mobile project development. Today, everything we need is Angular CLI and NativeScript Schematics, which is a collection that enables the build of web and mobile applications from the same project. Only prerequisite for a rapid start is to install Angular CLI (v6.1.0 or newer) and the last version of NativeScript Schematics.

**NativeScript Shared Project**

Shared Project is where the source code of Android, iOS and Web applications is located in a same place. Platform specific code is divided into separate files, and our goal is to share the most code possible between the apps. What can be shared is Routes for navigation, Services for common business logic and Component for common components behaviour. On the other side, what cannot be shared is View, CSS and HTML markup, as well as NgModules. Views will certainly be different because we quite often use various user interface components in Mobile and Web applications. Taking everything mentioned in account, it is possible to reach up to 70% of shared code in Shared Project.

**Mobile & Web projects Diversity**

If we want to assure the final appearance of mobile and web applications to be divergent, but also keep the common logic under the hood, it is necessary to do next. Web template should be named foo.component.html, while our NativeScript template for Android and/or iOS application should be foo.component.tns.html so the mobile and the web view will be separated. In this way, we will be able to load data through the async pipe or execute the same business logic methods in both examples. Dissimilar files can be easily and quickly generated through the snippets available in Visual Studio Code, and you are also able to develop unique features for each mobile platform (iOS & Android).

**Installation**

    # first you should install Angular CLI
    npm i -g @angular/cli

    # after that, you can install NativeScript Schematics
    npm i -g @nativescript/schematics

**Create a new project with Angular CLI**

    # classic Shared Project
    ng new --collection=@nativescript/schematics project-name --shared

    # classic Shared Project (shorter)
    ng new -c=@nativescript/schematics project-name --shared

    # Shared Project with SASS styling
    ng new -c=@nativescript/schematics sass-project --shared --style=scss

    # Shared Project with CSS styling (without standard NativeScript Core Theme)
    ng new -c=@nativescript/schematics no-theme-project --shared --no-theme

    # Shared Project with SASS styling (without standard NativeScript Core Theme)
    ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme

**Styling and Themes**

By default, CSS is a standard styling format in Shared Project and it consists of two main parts. Those are app.css for mobile and styles.css used for web application. However, if we want to use SASS instead of CSS approach, all necessary files will be generated as soon as you create new project if we state sass-project. We also have to bear in mind that NativeScript Core Theme is automatically generated in every newly created project and we can bypass it by using --no-theme flag while creating new Shared Project. After that, all standard themes configurations will be removed in package.json, as well as their references from NativeScript stylesheets.

**Build and run your iOS, Android or Web app**

    # build web app
    ng serve

    # build web app & open it in default browser
    ng serve -o

    # run native iOS application
    tns run ios --bundle

    # run native Android application
    tns run android --bundle

**Summary**

Angular presented us a new exciting way of sharing code between native mobile and web applications. This allows us to easily share business logic and also provides a simple and intuitive way to separate specific code between iOS, Android and Web apps. This was an overview of Shared Project's basic feature. You can try converting the existing Angular Web projects to a code-sharing project with additional reading from the links below. Cheers!

[Apps That Work Natively on the Web and Mobile](https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7)

[Migrating existing Angular Web projects](https://docs.nativescript.org/angular/code-sharing/migrating-a-web-project)