We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel ๐Ÿš€.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Engineers who find a new job through JavaScript Works average a 15% increase in salary ๐Ÿš€

Blog hero image

Compiling an Ionic React App for IOS

King Somto 15 April, 2021 | 3 min read

Intro

Ionic recently just added support for the React Framework, now React web developers can take advantage of this and create Hybrid Mobile apps. In this post, we would dive into how to compile an already made Ionic React app for the Ios apps.

We are going to look at how to set up the IOS development environment to compile a React Ionic app into IOS.

This article as comprehensive as it is not meant to teach you to have to create a React Ionic App because it would make the article a bit too much and boring but here is an amazing tutorial that you can try out (by me) on how to create a React Ionic app.

Setting up

Setting up the IOS development environment would require a few more software installations.

Xcode

  • Set up Ionic Project Code Sample
  • Capacitor

Xcode

This is the official Integrated development environment (IDE) for developing software for Ios devices, macOS, and other Apple devices, it can be gotten from the official apple development site with an apple account. Once that is set up run the following commands to make sure the command-line tools are ready for use.

xcode-select --install
Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

Setting up an Ionic Project

Friendly reminder again this tutorial is not to learn how to build an Ionic app so if you need that check out this tutorial, the above article is comprehensive enough to teach you how to set up the Ionic environment and also create a React Ionic app, and in case you don't want to go through all that I have prepared the project in a git repository that can be downloaded here.

Steps needed

git clone https://github.com/virgincodes/Javascriptworks-ionic-intro
cd ionic && npm install`
ionic serve

Our final solution would be

unnamed (3).png

Compiling the app

Compiling the app involves wrapping our Web app into a mobile app, platforms like Cordova and Capacitor are amazing solutions for this, they provide a Command Line Interface to be able to run commands to compile apps and add native plugins.

Capacitor

Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Capacitor comes preloaded with native code that lets Ionic access native app features like camera and gyroscope.

Steps To Compile with Capacitor

Installing the app involves setting up Capacitor and using it to compile the IOS app.

Step 1
  yarn add @capacitor/cli @capacitor/core    

This command installs capacitor into the local file directory

Step 2
  yarn run build    

This command builds the React app into a bundle that is lighter and can be run on the IOS app.

Step 3
 npx cap init    

This command initializes capacitor in the app project, at this stage we set some params like app name.

Step 4
npx cap add ios

This command adds IOS to the app

Step 5
npx cap open ios

This command opens Xcode with the app root file.

The app can be run by clicking the run button, this runs the app and opens up the emulator, where we can see the Ionic app running in our IOS simulator.

Screenshot 2021-03-07 at 11.11.42.png

Here we can see the app running in our emulator. Congrats, we just compiled our first Ionic app for Ios.

Screenshot 2021-03-07 at 11.22.34.png

Conclusion

In this tutorial we were able to set up our Ios development environment with Xcode and Capacitor, we used Capacitor to wrap our React app into an Ios app and run the app on the Ios emulator.

React Ionic app development is amazing and lets web developers jump right into mobile app development without learning many new concepts and skills.

Capacitor ships with Apis that lets developers access mobile native features that normally Js won't have access to.

Author's avatar
King Somto
I really dont know much but am willing to try and learn
    Python
    Node.js
    React
    Typescript
    Golang
    grpc

Related Issues

cosmos / gaia
  • Started
  • 0
  • 4
  • Intermediate
  • Go
cosmos / gaia
  • Started
  • 0
  • 3
  • Intermediate
  • Go
cosmos / ibc
  • Open
  • 0
  • 0
  • Intermediate
  • TeX
cosmos / ibc
cosmos / ibc
  • Started
  • 0
  • 1
  • Intermediate
  • TeX
viebel / klipse-clj
viebel / klipse-clj
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 2
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 4
  • Intermediate
  • Clojure
  • $80

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email