Tuesday, September 28, 2021

Capacitor

Speaking of cross platform libraries I tried out Capacitor today. Seems like an awesome way to build native apps because it literally replicates how you'd build a web app with HTML, CSS and JavaScript. This is a different mindset to something like React Native which does require you to learn some native only dependencies.

An example of this is using something like React Router. Capacitor seems to happily work with standard web like routing whereas in React Native the community recommends you use something like React Navigation. Nothing wrong with learning a new library but I like the fact I can use basically all the skills I have from building web apps and apply this to iOS.

The commands I ran today were as follows:

  1. Initialise a basic React app, I could have used TypeScript
npx create-react-app todo-app
  1. Set up development environment
# install Xcode

# install Ruby and cocoapads
sudo gem install cocoapods 
  1. Add Capacitor dependencies
yarn add @capacitor/core
yarn add @capacitor/cli --save-dev
  1. Initialise Capacitor in your project
npx cap init
  1. Write React code, can use any (I think) standard Node library, develop using web tools
yarn start

# install libraries
yarn add <dependency>
  1. Build app
yarn run build
  1. Add iOS as a platform
npx cap add ios
  1. Run app in device simulator, in this case an iPhone 11
npx cap run ios --target 6C334AA8-F99A-41A6-8C13-C25EA7C96B09
  1. Open app in Xcode, you need Xcode to distribute app and create .ipa file needed to send to the app store
npx cap open ios

A fun side project in this space might be a game? Not sure what though.