Ionic | Starting with Capacitor
Introduction
Git Repository is here.
Some articles to read.
- https://capacitorjs.com
$ npm -g install ionic $ ionic start SampleApp super --no-link $ cd SampleApp
$ npm install --save @capacitor/core @capacitor/cli
$npx cap init or $ 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
Installation
Requirements
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) Enabled 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
Ionic
$ 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
