Ionic Develop Environment Building Tutorial for iOS developers

May 15, 2018 • Read: 753 • Note

Especially for iOS developers who want to get in touch with Cross-platform Development

  • IDE

    • Visual Studio
    • Xcode
    • Android Studio


npm boost using tabao mirror 淘宝 NPM 镜像

  • Make alias for npm and active immediately
$ alias npm="npm --registry= \
--cache=$HOME/.npm/.cache/cnpm \
--disturl= \
$ source ~/.bash_profile

Installing Ionic🔨

Ionic Frameworks Docs

  • Getting Node and NPM
$ brew install npm
  • Ionic CLI and Cordova
$ npm install -g ionic cordova
  • Create your first Ionic app
$ ionic start HelloWorld tutorial

? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/n)

Input yes or y

? Install the free Ionic Pro SDK and connect your app? (Y/n)

Input no or n when you did not enroll Ionic Pro

  • Run and test in the browser
$ cd HelloWorld/
$ ionic serve

View the structure of your Ionic project

  • In Visual Studio Code press + O and select the project folder.

Build on iOS🍎

  • Build and generate Xcode workspace
$ ionic cordova build ios --prod

And then open HelloWorld/platforms/ios/HelloWorld.xcworkspace and run your Ionic project on iOS version.

Build on Android🤖️


$ ionic cordova build android --prod --release

And then open HelloWorld/platforms/android in Android Studio.

Android Studio will automatically downloads all dependencies, frameworks and other build requirements for you.

Press + R to run your Ionic project on Android version.

Last Modified: September 20, 2019
Archives Tip
QR Code for this page
Tipping QR Code