We will also see how to test our app while building. Now this post is for Mac users only. Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here. Also we need Ionic and Cordova, So open a terminal window (Mac) and install Cordova and Ionic. Ionic enables web developers to ship apps to the app stores and as a PWA with a single shared code base. With Ionic’s Adaptive Styling, your app looks and feels at home on every platform and device. Developer friendly tooling. Create, build, test, and deploy your app with a powerful CLI. Access features like Live Reload, cross-platform. Have you tired of searching the ionic and Cordova (PhoneGap) setup tutorial? We have written step by step instructions for you. This article is common for both Windows & Mac. Please do not skip any single steps. We have also added checklist on every step & included. Note: You must need a mac if you want to build your app for iOS. You do need OS X or macOS to “build” (compile) the app but as Ionic apps behave almost identical on Android emulators and devices, you should be able to code / develop / design them without a Mac or virtual machine, using Windows or Linux environm.
Updates:
- 2016-08-13: Added Gradle and VS Code. Changed from JDK7 to JDK8. Removed Ant.
If you are like me and just starting to work with the Ionic Framework and don’t already have a machine setup to do Android, iOS, Node, etc development then many of the guides out there leave out a number of steps that you need to do in order to get everything working.
Even being a Windows user I was able to pretty easily get Ionic working on a Mac. The only difference between the Windows setup and the OSx setup is that you can build for an iOS device on a Mac.
Software to be installed
- Global Npm Modules:
- Genymotion (Android emulator replacement) `- XCode
- XCode Command Line Tools
General Install Steps
Google Chrome
We need Google Chrome in order to debug our application when it is running on a device. The device emulation and developer tools are also extremely useful to have.
Download from https://www.google.com/chrome/browser/desktop/
Node
- Install the LTS version of node from https://www.nodejs.org
Npm Packages
- Open a terminal and run the following commands to install the Global NPM packages that we need:
At this point, we can create ionic projects and test them in a web browser. https://everblu123.weebly.com/blog/how-to-remove-apps-from-startup-mac. To make sure that functionality is working:
Verifying General Install
- In your open terminal, navigate to the directory where you store your development projects (I use ~/projects)
- From ~/projects run:ionic start todo blank
- cd into todo (directory was created by the ionic start command)
- Run the following command to run the todo app we generated in a web browserionic serve –lab
In the next section, we will install everything needed to deploy to an Android device.
Android Setup Steps
In order to deploy to an Android device you need to install the Java JDK, Android Studio, and Android SDK. We will walk through installing all of the required software setup.
JDK 8
Download from http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
After the install, launch a terminal and create a ~/.bash_profile if it doesn’t already exist. You can use touch ~/.bash_profile to create the file.
- Open up either vi or nano and add the following line:
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_72.jdk/Contents/Home
Android Studio
Download from http://developer.android.com/sdk/index.html#Other
Android SDK
Download the Android SDK from [http://developer.android.com/sdk/index.html#Other](http://developer.android.com/sdk/index.html#Other_
https://everblu123.weebly.com/blog/best-app-cleaner-mac-os-x. Unzip the downloaded SDK to to ~/Development
Open ~/.bash_profile and add the following line:
In the terminal type source ~/.bash_profile to load the ~/.bash_profile changes.
Now we need to download the Android APIs versions that we care about. In this case, we are only going to install the API 23 Android SDK Tools and Android SDK Build-Tools
In the terminal window, type android to launch the Android SDK Manager.
Install the the following
- Tools -> Android SDK Tools
- Tools -> Android SDK Build-Tools
- Tools -> Android Platform-Tools
- API 23 -> SDK Platform
Genymotion Setup
Download Genymotion from https://www.genymotion.com/.
The Genymotion installer will also install VirtualBox if it is not already installed.
Once Genymotion is installed, we need to download a device.
- Open up the Genymotion UI and click on the Add Button.
- Then click the Sign in button and follow the login instructions to login with the account that you create as part of the Genymotion download.
- After you are logged in, select from the Android Version drop down 4.4.4
- From the Device model drop down select a device type
- Then select a device from the available list
- Click the Next button.
- Click the Next button and wait for the device to download
- Click the Finish button.
Verify the Android Setup
- Open terminal
- Navigate to the todo app that we create as part of the general install verification. (I used ~/projects/todo)
- If you need to ceate the todo app run the following from ~/projects:ionic start todo blank
- How do you open apps on mac. cd into todo (directory was created by the ionic start command)
- The todo app is now setup to be able to deploy to an Android device. To validate that we can build for Android, run the following:
- The todo app is now setup to be able to deploy to an Android device. To validate that we can build for Android, run the following:
- The last thing we need to verify is that we can deploy the todo app to the Genymotion Emulator. Before we can deploy the application, we need to start up the emulator. How to sideload apps oculus go mac pro.
- Start the Genymotion device you downloaded and run:ionic run android
You are now ready to go create ionic applications that you deploy to an Android device.
iOS Setup Steps
XCode Setup
- Install Xcode from app store. This will take awhile since it is ~2 gigs in size.
- Once install is completed, open xcode and accept the license
- Install the iOS Simulator that Ionic will use.npm install -g iOS-simNote that if you just install NodeJs without using HomeBrew, you may have to add sudo in front of the npm install commands.
Verify the iOS Setup
- Open terminal
- Navigate the directory where you store you development projects (I use ~/projects)
- If you need to generate the todo app, run the following command from the ~/projects directoryionic start todo tabs
- cd into todo (directory was created by the ionic start command)
- We need to do is tell ionic that we want to add the iOS platform to our todo app by running:
- The todo app is now setup to be able to deploy to an iOS device. To validate that we can build for iOS, run the following:
- The last thing we need to verify is that we can deploy the todo app to the iOS Simulator by running:ionic run iOS
Ionic Mac Os App Mac
You are now ready to go create your ionic applications.