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.
You can always use Cordova plugins with Capacitor without a problem - with exception of a few plugins
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
$ 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
$ npm install --save @capacitor/core @capacitor/cli
When this process finishes we need to init capacitor with
$ 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.
$ npm run build
After this it’s a good idea to remove the Cordova Splashscreen Plugin because Capacitor conflicts with it.
$ npm uninstall --save cordova-plugin-splashscreen
Next we can add Android and iOS platforms.
Add iOS platform
$ npx cap add ios
Add Android platform
$ 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
$ npx cap copy
This will copy the changes down to your native projects.
Next you can run
$ npx cap open android
This will open your project inside Android Studio
$ npx cap open ios
This will open your project inside Xcode
From here you can build and publish your app.
Thanks, Cya in the next one.