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)