- If you like this project, please consider giving it a star (*) and follow me at GitHub & YouTube.

Deploy Angular 6.0 (HTML, JS, CSS) App to cross platform mobile, web and desktop using Ionic Capacitor

Objective:

The development environment setup in this episode will further be utilized in multiple desktop, web and mobile apps development in near future.

[Click here for Video Tutorials !

Introduction:- Angular

Angular is framework supported by Google, which lets you build Progressive Web apps, mobile apps for iOS, Android, Windows environment and desktop software for Windows, Mac and Linux machines.
angular.io

Introduction:- Ionic Capacitor

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.
capacitor.ionicframework.com/

Single Codebase, Server-less or multiple platforms/database:

My goal for this Angular development environment setup is to build, real world applications using a single code base for desktop and mobile apps.
I will try to setup my development environment in such way, that a single code base can serve desktop, mobile apps for different platform. Like iOS, Android, Windows and Linux desktop and mobile apps.

Also, my goal is use same codebase to support different hosting and databases with minimal changes.

Let’s get started :

-------------------------------------------

I have been using Apache Cordova framework to build cross platform mobile apps. The reasons I want to try out and looking forward to Ionic Capacitor framework are

• Capacitor fits into existing "package.json" Angular, React or any project. No separate setup is required.
• Capacitor Pro version will allow iOS development on Windows or any other machine.
• Built-in Electron app functionality.
• Built-in PWA (Progressive Web App) functionality.
• backwards-compatible support for many existing Cordova plugins.

Capacitor Required Dependencies

$ node -v // make sure node is 8.6.0+
$ npm -v // make sure node is 5.6.0+

iOS - Capacitor Required Dependencies

Mac with Xcode 9 or above.
Soon, you'll be able to use Ionic Pro to build for iOS even if you're on Windows.
install CocoaPods (sudo gem install cocoapods)
install the Xcode Command Line tools (either from Xcode, or running xcode-select --install)

Android - Capacitor Required Dependencies

JAVA 8 SDK
ANDROID ADK + ANDROID STUDIO
//Target API Level 21

PWA - Capacitor Required Dependencies

JavaScript project with module loading support. For example, using Webpack or Rollup

Electron - Capacitor Required Dependencies

JavaScript project with module loading support. For example, using Webpack or Rollup

Development :

-------------------------------------------

Adding Capacitor to an existing web app

Capacitor was designed to drop-in to any existing modern JS web app.
To add Capacitor to your web app, run the following commands:

$ cd my-app

$ npm install --save @capacitor/core @capacitor/cli

Then, init Capacitor with your app information. This will also install the default native platforms.

$ npx cap init

This command will prompt you to enter the name of your app, the app id (used primarily as the package for android), and the directory of your app.
Capacitor is now installed in your project

npm run build // for npm projects

ng build

// for Angular 6.0+ projects

ionic build

// for Ionic projects

Capacitor : PWA - Progressive Web App

With a Build System

// if you are using Angular or React npm build (like ng build)

make sure to build Angular app (ng build) and publish to www directory with a valid index.html file inside it. Otherwise npx cap add electron will give an error.

$ ng build --prod // first build your angular app

** make sure in angular.json file, outputPath = "www"

** make sure in capacitor.config.json file, webDir = "www"

** make sure in capacitor.config.json file, bundledWebRuntime = "false"

$ npx cap add web

$ npx cap copy web

$ npx cap serve

Capacitor : iOS

$ npx cap add ios

$ npx cap copy ios

// Once your web code is built, it needs to be copied to each native project

$ npx cap open ios

Capacitor : Android

$ npx cap add android

$ npx cap copy android

// Once your web code is built, it needs to be copied to each native project

$ npx cap open android

Capacitor : Electron

$ npx cap add electron

$ npx cap copy electron

// Once your web code is built, it needs to be copied to each native project

$ cd electron

$ npm run electron:start

Other helpful commands for PWA

** Directly call capacitor in your code
import { Capacitor } from '@capacitor/core';
import { Plugins } from '@capacitor/core';

const position = await Plugins.Geolocation.getCurrentPosition();

Running Natively and on the Web

import { Capacitor } from '@capacitor/core';

const isAvailable = Capacitor.isPluginAvailable('Camera');

if (!isAvailable) {
// Have the user upload a file instead
} else {
// Otherwise, make the call:
Camera.getPhoto()
}

Without a Build System

** update capacitor.config.json
{
"bundleWebRuntime": true
}

$ npx cap copy web

In index.html, import capacitor.js before your app's JS:
< script src="capacitor.js" >< /script > // remove extra space in script tag
< script src="your/app.js" >< /script >// remove extra space in script tag

$ npx cap serve

When you're ready to publish your Progressive Web App and share it with the world, just upload the contents of your web directory (default: public/

Commands to remember for later use

$ npx cap copy

$ npx cap open

$ npx cap serve

// for progressive web apps

$ npx cap update

$ npm install really-cool-plugin

$ npx cap update // after plugin install

$ npx cap sync

Add this to package.json

{
"scripts": {
"build": "command-to-build (ex: webpack, tsc, babel, etc.)"
}
}