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