Build Mobile iOS, Android, and Web Apps Using React and Ionic, Part I
I’ve written a book on web development. It is an end to end complete book on modern development practices. Here’s a coupon code to save 20% on Amazon 20FULLS.
Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with…
Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL [Choi…
This article will be the first in a series introducing Ionic 4. And showing how you can keep your existing skill set for the web, to create attractive and fully functional mobile applications.
Originally, I had planned to use React Native for my mobile app. I’m a React developer so it seemed reasonable to assume it would be what I needed. But one of the things that annoyed me right away was the syntax. It was quite different from React for the web. In addition I found some frameworks that I liked don’t work in React Native. Things like standard CSS and React Router are not used in React Native development. So after trying it out I started shopping around for something better. I think Ionic is what I was looking for.
OK so all this sounds cool but what’s the big deal? What this all means is that now you can write your iOS, Android, Web or even Desktop App entirely using a web framework of your choosing. So if you are a React dev you can keep using your favorite npm packages and coding techniques to build mobile apps that look and feel just like native apps. No quasi CSS like object syntax; no HTML wanna-be tags. Just standard React in all its glory. So let’s get a feel for what Ionic development is like by building a small photo app and deploying onto an iPhone. First let’s install Ionic globally.
npm i -g ionic
Once you have Ionic installed globally we can use it like create-react-app to setup our initialized application. Let’s create our app by calling Ionic cli without any parameters.
ionic start MyPhotos
As the screenshot shows, the first thing to do is select which web framework you will be using to build your app (note Vue is currently still in beta). Let’s select React and then go to the next step. This step allows us to select which starter template to use to build our app. To allow for simple navigation in our app let’s select tabs.
Finally after hitting enter Ionic should start setting up your project. It has to download quite a few packages so this can take a while. Once it completes cd into the MyPhotos directory and type
You should see the app load in your browser, and if you use chrome’s debugger and switch to mobile mode you should see the below.
As you can see the built in template is quite attractive and has a theme fairly similar to other native iOS apps. Now let’s take a look at the contents of the MyPhotos directory and see how Ionic has laid out this project.
The layout is a pretty standard React-like folder structure. You have a src folder, index and App files, an npm packages.json file, and a public build folder. Also as is clear by the file extensions Ionic uses TypeScript by default, although this can be disabled. If you open the App file you should see the following.
Again Ionic fully supports hooks without additional updating. If you look at the code you notice the JSX starts with IonApp at the root. Every Ionic app must have the IonApp component at its base. After that you can see the IonReactRouter component. This is a wrapper around React Router that Ionic has created to allow for better integration with their framework, it’s comparable to the BrowserRouter. After that you can see the IonTabs component which will host the individual tabs involved in navigation. And finally you should see the IonRouterOutlet. This component is roughly equal to the Switch component in React Router.
Now that we have a feel for a basic Ionic app I need to explain how we go from this web app to an iOS or Android app. So as previously mentioned Ionic at its core uses only web technologies. There is a clean separation of concerns between Ionic the web framework and the native mobile pieces. So then the question is how do we build an app that works, on iPhone and Android, like a native app? This is where Capacitor comes in. Capacitor is the glue that ties your web app to native services. It wraps your code, so that it can function as a native app. Capacitor also provides the integration to our native development environment, for example XCode on Mac, so that our web app will be compiled into a native binary and can hook into all the native device capabilities that we want.
Note in order to build a native binary we need a computer running XCode. Unfortunately Apple does not provide XCode on non Mac computers so you’ll need a Mac to build your iOS app. However, I do want to be clear on this point, you can develop your app on any platform that allows for React web development. Only when it comes time to compile into an iOS binary and test hardware services will you need a Mac computer. Android fortunately does not have this limitation.
Let’s setup Capacitor now. First we start by enabling Capacitor in our existing application. Type
ionic integrations enable Capacitor
When it’s complete you should see something like this.
Now that we’ve enabled Capacitor in our app we’ll need to add the iOS integration. But before we do that make sure you’ve built your app at least once since Capacitor needs the build folder to exist in order to setup properly. Now type
ionic cap add ios
If you get asked to install the Capacitor cli, enter yes as you’ll need it to run commands. Once this setup completes we can open our iOS app in XCode. Type
ionic cap open ios
Once your XCode project opens you will need to attach your iPhone via usb and then select it in XCode as the device to use for testing (it is also possible to use their emulators, but final testing should always be done on a real device). Now once all this is done and you try and run your project from XCode you will see this error.
This error is indicating Apple’s requirement to associate a developer account with an application. Go back to your file explorer view on XCode and click on the root App icon. You should see this
As you can see on the darker right side of the screenshot, there are multiple tabs and you end up on the General tab first. Click on the Signing & Capabilities tab and you should see this.
On this tab you should see the Team drop down. Select it and choose your desired dev account. Obviously if you don’t have one you’ll have to create it. Once you select the proper team account it will automatically update your Signing Certificate and you’re ready to start your app!
Make sure your iPhone is connected and selected within XCode as the test device. Then click the play button on the upper left corner of XCode. You should see the app auto start up on your iPhone. It will look just like the web app that we started earlier in the web browser.
Great we built and started our first iOS mobile application using Ionic. This was quite a bit of reading and configuration so I’ll end Part I here. In the next post I’ll show how to update the tab navigation and start modifying the components to create our photo app screen.
Part II has been released.
If you prefer vanilla React without Ionic try this article.
If you have any questions put it on my website DzHaven.com and I’ll answer it there.