Use Ionic framework ‘Capacitor’ to write Angular 7 code and create apps for PWA, iOS, Android, MacOS, and Windows in one go.
https://medium.com/@jeroenouw/capacitor-how-to-get-five-apps-in-one-time-636d2fc7026a
by Helloquence on Unsplash
Are you also a lazy developer? And do you want to create multiple apps with only doing the effort ones? And you don’t want to learn languages like Java and Swift? Please consider Capacitor. An Ionic framework (which uses Angular) for creating a cross-platform app at runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.
Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them. Adding native functionality is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.
- Cross Platform
- Native Access
- Use with Ionic and Angular 7
- Web Native
- Extensible with Plugins
- Open Source (MIT)
We are going to install the Angular CLI, Ionic and npx globally, create a new Angular 7 project and then install the dependencies: Capacitor Core and CLI. After this, we initialize Capacitor into our new project.
Note: the project in this post will be empty, this is just to show you how to generate the project and build all the different apps.
npm install @angular/cli ionic npx -g #Replace Angular with ReactJS
ng new capacitor-app #Replace with ReactJS project setup
cd capacitor-app
npm install @capacitor/core @capacitor/cli --save
npx cap init
PWA — Progressive Web App
To build a PWA, make sure to have the following configurations set:
- In your angular.json file:
outputPath = “www”
- In your capacitor.config.json file:
webDir = “www”
bundledWebRuntime = “false”
After this you can run:
ng build --prod
npx cap serve
npx cap add ios
npx cap copy ios
npc cap run ios
npx cap add android
npx cap copy android
npc cap run android
Make sure to have this in your index.html :
<base href="./">
Now you can run:
ng build --prod
npx cap add electron
cd electron
npm run electron:start
After running all the commands in the command line, you have five different apps made in no time with only coding one app. You can now start developing your Capacitor project!