Initial Setup

This page describes the initial setup steps. Follow the steps to get the app setup and running on your dev environment, as well as on your devices.

Here's a small video showing the setup and first run of the app on a Mac System. For details of setup process, follow the instructions in following sections

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.

Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility. (The base requirements for Capacitor are Node v8.6.0 or later, and NPM version 5.6.0 or later, but we recommend node 12.16.1-LTS)

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version
$ npm --version

This starter app will run best with node 12.16.1

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

Install the Ionic CLI

Before proceeding, make sure a stable version of Node.js and npm are installed. Install the latest Ionic CLI globally with npm:

$ npm install -g ionic@latest

Git

Git is a distributed version-control system for tracking changes in source code during software development. Although it's not required, we highly recommend using Git for your app development.

First, install the command-line utility from the download page. For a GUI client, we recommend SourceTree. To verify the installation, open a new terminal window and run:

$ git --version

You can also use Git CLI to perform all Git related tasks. A good description of all Git CLI commands is given here.

Install the app dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd myApp
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same. (You can also always run npm audit fix to fix the vulnerable versions)

Code Editor

Personally we use VS Code , however, many people like Atom. You are free to choose any code editor you like.

iOS Development

For building iOS apps, Capacitor requires a Mac with Xcode 10 or above. Soon, you'll be able to use Ionic Appflow to build for iOS even if you're on Windows.

Additionally, you'll need to install CocoaPods (sudo gem install cocoapods), and install the Xcode Command Line tools (either from Xcode, or running xcode-select --install).

Once you have CocoaPods installed, update your local repo by running pod repo update. You should run this command periodically to ensure you have the latest versions of CocoaPods dependencies.

As a rule, the latest version of Capacitor always supports the last two iOS versions. For example, iOS 11 and iOS 12. For support for older versions of iOS, use an older version of Capacitor (if available).

Capacitor uses the WKWebView.

Android Development

First, the Java 8 JDK must be installed and set to the default if you have other versions of the JDK installed. Java 9 does not work at the moment.

Android development requires the Android SDK installed with Android Studio. Technically, Android Studio isn't required as you can build and run apps using only the Android CLI tools, but it will make building and running your app much easier so we strongly recommend using it.

Android version support for Capacitor is more complex than iOS. Currently, we are targeting API level 21 or greater, meaning Android 5.0 (Lollipop) or above. As of May 2019, this represents over 89% of the Android market.

Also, Capacitor requires an Android WebView with Chrome version 50 or later. On Android 5 and 6, the Capacitor uses the System WebView. On Android 7+, Google Chrome is used.

Run the App

Now we have everything installed, we can test our Ionic App.

Go to Running the App section to see how to do it.