Capacitor and Ionic Integration

A thing or two about capacitor

Before we setup ionic and capacitor environment let’s take a look at what capacitor is.
Capacitor is the The Native Bridge for Cross-Platform Web Apps, it has been developed by ionic team and it allows you to use the native features of iOS, Android, Electron (desktop), and the Web (browsers). This means that with with one code base you can cover all platforms.

According to ionic team in 2019 Capacitor will become the official native abstraction and runtime for all ionic applications.

Even though ionic has been working on a new project that essentially replaces Cordova, they state that they will still use Cordova heavily and continue to invest in the platform.

Note
You can always use Cordova plugins with Capacitor without a problem - with exception of a few plugins

Ionic and Capacitor Setup

If you don’t have an ionic project setup yet let’s get on with that. First let’s generate an ionic project with the command

1
$ ionic start myApp blank --type=angular

Here we are creating a blank ionic project with name set to myApp and with --type=angular we are telling ionic CLI to setup our project with Angular (this might not be needed when ionic version 4 officially releases)

After we have our ionic app cd in to our app and now let’s install capacitor

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

When this process finishes we need to init capacitor with

1
$ npx cap init

This command will prompt you to enter the name of your app and the app id (you can think of this as a unique key used primarily as the package for android).

Next we must build our app so we can add Android and iOS platforms. This will generate the WWW folder that will contain our application.

1
$ npm run build

After this it’s a good idea to remove the Cordova Splashscreen Plugin because Capacitor conflicts with it.

1
$ npm uninstall --save cordova-plugin-splashscreen

Next we can add Android and iOS platforms.
Add iOS platform

1
$ npx cap add ios

Add Android platform

1
$ npx cap add android

When you make changes to your applications and when you are ready to test or publish your app don’t forget to
build with ( $ npm run build ) and than run

1
$ npx cap copy

This will copy the changes down to your native projects.

Next you can run

1
$ npx cap open android

This will open your project inside Android Studio

1
$ npx cap open ios

This will open your project inside Xcode

From here you can build and publish your app.

That’s it.
Thanks, Cya in the next one.



Share