Creating a simple React App in Ionic/Capacitor

So this week I had a Hackathon week at work, so I though hmm is there is something I wanted to try for a long time but didn’t have enough time to do so? Hmm ok Ionic and creating a React app in Ionic. I had some experiences before in creating native apps in React Native but I wanted to try in Ionic.

First I followed the instructions on installing ionic

npm install -g @ionic/cli

This installs ionic globally in your Machine.

You can start the app by running the following:

ionic start 

If you type you will get the Wizard and you can select how to build the app from the web portal (otherwise the answers are given by the cli)

I selected the name the template and also React

Run the app on you browser using

ionic serve

But no I wanted to run something in a mobile device emulator

To do so you need to use Capacitor (Only Capacitor runs the React version)

Install capacitor by running the following command

npm install @capacitor/ios @capacitor/android

Once you do this you can install the native platforms.

npx cap add ios 
npx cap add android

To run the capacitor and ionic project on a mobile device you need the following:

ionic capacitor run

When I did that I had already installed xcode and Android studio

Now you can load the same app and dev on three different environments on ios, android and on web.

If for some reason you get problems running Java (The Android version needs Java version 11 and above)

You can find on the MAC which version you installed first

/usr/libexec/java_home -V -- this command tells u which versions you got installed

Choose which version you want to run

export JAVA_HOME=`/usr/libexec/java_home -v 11.0.16` use this to set the version

You should be able now to see either an Iphone or a Pixel phone. For my xcode the default phone was the Iphone SE.

See the cli now is working

This is the phone loading once I run the command. I must say it was easier than React Native! Although I have to say using expo on your phone is really cool.

Happy coding…