Lately I've been experimenting with Ionic/Capacitor to build native apps using Vue.js. But I had problems building for iOS and configuring all the dependencies... so I wrote this short guide to help you with that.
This is part of #10stips (the column where you learn how to solve coding issues within 10 seconds or so, because I already tested it for you).
The tech stack
Vue is a Javascript framework meant to be easy yet powerful, and it allows the creation of powerful web apps.
Ionic is a popular platform for building native-looking IOS/Android apps using HTML, CSS and Javascript. And adding native functionalities and Ios/Android support becomes super straightforward with Capacitor, that integrates perfectly with an Ionic project.
The problem
After creating a sample app, that I tested on the browser with ionic serve, I felt ready to deploy it on my iPhone.
I plugged in the phone to my Mac Mini M1 via USB-cable, made sure it has been recognised, and in Visual Studio Code I launched a new terminal and typed...
ionic build ionic cap add ios and boom! command failed.
zsh: command not found: pod I quickly recognised there were unmet dependencies and after checking the documentation (here and here) and following some online tutorials, I launched again and boom.... another error.
Invalid Podfile file: cannot load such file -- /Users/admin/CapProject/node_modules/@capacitor/ios/scripts/pods_helpers WTF! It took me a while to make it work, so I created these steps for you:
# First, update your OS (at least MacOS 12+) # this is to ensure the greatest compatibility between Apple Silicon and other libraries # you will need NodeJS 14 or higher node --version # make sure to have the javascript package manager npm --version # ionic/cli should be present at this stage because you already built your amazing app npm install -g @ionic/cli # install Xcode # just open the App store and search for it # make sure you have Xcode Command Line Tools xcode-select --install # check the installation with xcode-select -p # should appear this /Applications/Xcode.app/Contents/Developer # Install Cocoapods with Homebrew (do not install it manually using ruby gems as sometimes suggested) brew install cocoapods # Now, restart your computer (seriously, this is important!) restart # check the installation with pod --version # build your project to create a dist folder ionic build # add Capacitor IOS support # this time it should work and it creates an ios folder ionic cap add ios # open up your IOS build in Xcode ionic cap open ios Few, you're done! Make your clients happy ;)
Matt
Top comments (0)