Ionic 4 | Starting with Capacitor


Git Repository is here

npm -g install ionic
ionic start SampleApp super  --no-link
cd SampleApp
npm install --save @capacitor/core @capacitor/cli

npx cap init sample-app com.example.sampleapp
npm run build
npx cap add ios

npx cap copy
npx cap copy ios
npx cap open ios



Working with Ionic and Capacitor needs additional software like node and python.

To separate our development environment from other parts of our system, we will use virtual environments for both parts:

To automatically setup this environment when entering the directory, additionally we will use direnv. Read this post to get more detailled information about direnv.

Setup under Mac OS

Install components

Use Homebrew to install the required components

$ brew install direnv nvm pyenv

Configure direnv

Configure your shell to use direnv. Add the following into your .profile or .bashrc.

eval "$(direnv hook bash)"

Change to your development directory and setup direnv

cd <your development dir>

Use this file as as starter for direnv. Copy the file into the directory with the name .envrc

After saving or creating the file .direnv, you will see the following direnv message:

direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

Just type direnv allow, to use this file

$ direnv allow
direnv: loading .envrc
setup               : nvm        (<your development directory>/.env/nvm)
set default         : nvm        (default)
N/A: version "default -> N/A" is not yet installed.

You need to run "nvm install default" to install it before using it.
set default         : python     (2.7.14)
pyenv: version `2.7.14' not installed
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.7.1)
Enabled             : npm        (5.6.0)
pyenv: version `2.7.14' is not installed (set by <your development directory>/.python-version)
direnv: export +NVM_RC_VERSION ~NVM_DIR         : python     ()

Install additional software components

See the error messages in line 7 and 13? You need to install node and python:

$ nvm install 10.8.0
$ pyenv install 2.7.15

The desired versions are activated by direnv because of this lines in you .envrc

# Activate Node
$ nvm use default --silent

# Activate Python
$ pyenv local $PYTHON_VERSION

Final check

Leave the directory and reenter again, or type direnv reload

direnv: loading .envrc
setup               : nvm        (<your development directory>/.env/nvm)
set default         : nvm        (default)
set default         : python     (2.7.14)
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.8.0)
Enabled             : npm        (5.6.0)
Enabled             : python     (Python 2.7.14)
Enabled             : python2    (Python 2.7.14)
direnv: export ~NVM_DIR

Prepare for capacitor

Detailed description can be found here

Start with a Ionic template

$ npm -g install ionic
Create sample app from template and change to the SampleApp directory
$ ionic start SampleApp super --no-link --bundle-id com.example.sampleapp
$ cd SampleApp

Important: Be sure to say NO no when asked for integration of Cordova. We will use Capacitor.

Build your app, we will need the www directory with the web files
 $ npm run build
 Add capacitor support
$ npm install --save @capacitor/core @capacitor/cli
$ npx cap init sample-app com.example.myapp
$ npm install -save @capacitor/core
$ npx cap add ios
Build your app
$ npx cap copy ios
$ npx cap open ios

The last command starts Xcode:

Now, you can build and run your iOS App