4

Newer guides posted at end of OP:

I am creating this in hopes of helping others. As Mac OS X has evolved, and the tools needed to run Cordova/Ionic on Mac have evolved, the processes needed to get your environment setup properly have also evolved. What worked just 1 year ago dosen't necessarily work today. I know as I have had to setup multiple Mac environments during the last twelve months and even my own "guides" no longer work and needed a fresh overhaul.

This setup guide, and caveats, was used to install the latest Node/Cordova/Ionic on Mac OSX 10.15.5 Catalina. If you experience different issues throughout the various steps, please post your step number, what the issue was and how you got around it - so others can benefit too.

Mac 10.15.5 Catalina - Cordova install guide (July 15, 2020):

NOTE: The importance of installing base packages with Homebrew "brew" is key. Otherwise you begin running into access/write issues on certain directories which then forces you to try to use "sudo" to install various packages which is itself a bigger problem and will create headaches. Use brew unless you really know what you're doing.

PREREQUISITE - Install homebrew:
   A: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   B: brew update
    
1. Install latest Java SDKs (https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html)

2. Install latest Apache ANT 
   "brew install ant"
        
3. Install intel universal mavericks (https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwix4vrrms3qAhWjT98KHcdwDnsQFjABegQIARAB&url=https%3A%2F%2Fsourceforge.net%2Fprojects%2Fgit-osx-installer%2F&usg=AOvVaw0ab9OGLPy1CnM8PKUa9k_c)

4. Install highest Xcode for your OSX
   - start xcode and agree to licenses


5. Install latest node for
    - Ionic CLI > v1.7.16, use nodeJS@latest
    - Ionic cli v1.7.16 or lower USE nodeJS@6.11.0  (this will auto install npm 3.10.10)
      - from here: https://nodejs.org/en/  (use the 6.11.0 package)
      - after you install DO NOT update/upgrade node and npm to the latest versions
      - Node versions > 6.11.0 are incompatible with ionic v1.7.16
      - However, as Ionic is up to v6x, there should be no reason for v1.7.16

    "brew update"
    "brew install node"

    If you get an error creating symlinks, THEN perform the following
      "sudo chown -R $(whoami) $(brew --prefix)/*"
      "brew doctor"
      "brew link node"

6. "brew install nvm"
    - IF you get errors on /usr/local/share/man/(man3/man5/man7) directories, THEN perform the following
      "brew uninstall nvm"
      "chmod u+w /usr/local/share/man/man3 /usr/local/share/man/man5 /usr/local/share/man/man7"
      "brew install nvm"

Now that NODE/NVM are cleanly installed, we move over to NPM for the remainder of installs. You SHOULD NOT have to use "sudo" for any npm install commands. If you do, see opening notes and continue at your own risk. "sudo npm install -g XXXX" can open up a can of worms for you. After each NPM package install I recommend saving to a POST_INSTALL.log file any package WARN/Deprecated notices for future reference. I did this and it saved my butt on a few things

7.  "npm install gulp-cli -g". // global install
8.  "npm install gulp" // local install
        - some will advise this step is done from your project directory
          AFTER you create your project
9.  "npm install -g cordova@latest" // requires sudo to install globally
10. "npm install -g @ionic/cli"
11. "npm install -g ios-sim"

12. NOTES about intalling ios-deploy"
    "npm install -g ios-deploy"
    A. IF you get "xcode-select: error tool 'xcodebuild' requires xcode" type error
       THEN: 
        1: "xcode-select —install"  // might already be installed
        2: "sudo xcode-select --switch /Library/Developer/CommandLineTools"
        3: "sudo xcodebuild -license accept"  // might already be accepted
        4. "npm install -g ios-deploy"
    B. IF this doesn't work and you are still getting the same error, then the xcode-select path probably needs to be changed:
        1. "xcode-select -p"  // probably outputs '/Library/Developer/CommandLineTools'
        2. And your xcode is installed elsewhere
        3. "sudo xcode-select --reset" // this will reset your path 
        4. "xcode-select -p"  // should output '/Applications/Xcode.app/Contents/Developer'
        5. "npm install -g ios-deploy"

      MORE: 
        - If you get errors on /usr/local/share/man/(man3/man5/man7) directories, THEN perform: 
          "chmod u+w /usr/local/share/man/man3 /usr/local/share/man/man5 /usr/local/share/man/man7"
        - IF your OSX is over 10.11 El Capitan OSX, THEN you will MAY need to use: 
          "npm install -g ios-deploy --unsafe-perm=true"
                
13. "npm install -g cordova-res"  //cordova/ionic resource files for icon/splash images

14.  "npm install -g native-run" //provides support to launch app direct to simulators

15.  If you are requiring Facebook4 and/or FirebaseX plugins for your Cordova/Ionic PROJECT,
     you WILL need cocoapods, better just install it now:
         "sudo gem install cocoapods"
         "pod setup"

16.  create project : 'ionic start NAME tabs'
     - this should auto add: 'ionic Cordova platform add ios' for you
       if it does not, you will need to execute that command manually
       "cd $PATH/<project-name>"
       "ionic cordova platform add ios"
     - build your base project
       "cd $PATH/<project-name>"
       "ionic cordova build ios"
     - deploy your first project
       "ionic Cordova run iOS"

If you have compiled without errors then you are good to go. Next begin building your real project by installing all the necessary plugins and testing on real iOS device or simulators. For true beginners below are some tips on how to get started deploying apps in the Mac world:

Install all necessary cordova plugins - the repository can be found at web address above: www.nmpjs.com You can deploy apps to the iOS Simulator, but to deploy apps directly to phones you will need:

  1. Apple Developer Account ($100 fee) http://developer.apple.com - you will need to sign your apps with your developer ID.
  2. I don't recall, but I don't think you can even compile an app to the simulator, let alone to a real phone, without a developer ID. Once you create your developer ID account, you then add in "authorized devices" to your online developer account
    • you would add your iPhones, or other iPhones UUIDs to your developer account
    • then attach that device to your Mac...and then that phone will appear in Xcode which will allow you to deploy apps to ONLY those devices listed in your developer account (apple sucks this way)
  3. In your project link/sign your project with your developerID
  4. You may find your version of Xcode still won't deploy your app to your phone (step #3) because it doesn't recognize the phone type or latest iOS on that device, here is a thread to help you understand what you must do if this happens:

Happy coding!

PS: I will periodically update this guide as it evolves and/or others make relevant contributions.

==================================== UPDATE: Sept 1, 2021

I created two guides now, a slightly updated iOS/Mac guide and a new Android/Windows guide. These two new guides will be the primary ones moving forward:

Android/Windows: https://forum.ionicframework.com/t/android-windows-full-environment-install-guide-for-cordova-ionic/214515

iOS/Mac: https://forum.ionicframework.com/t/ios-mac-full-environment-install-guide-for-cordova-ionic/214513

rolinger
  • 2,787
  • 1
  • 31
  • 53
  • Looks useful, but it should follow the Q&A format: post a proper question, and then post the guide as a separate answer, don't put it in the question. – Guy Incognito Jul 15 '20 at 13:07

0 Answers0