How to make Ionic apps in React Using Capacitor

If you are here, that means you were searching for how to create Ionic apps in react using capacitor. If that’s true, then you are at the right place. Here I would be creating an Ionic app in React Using Capacitor. Need not worry, I would be taking you step by step how to make Ionic apps in React Using Capacitor. I would be cooking a simple application. 🥘

You can also check out my Ionic 4 React Full App. It is loaded with a good number of options, layouts, and functionalities. This is a complete starter app to get started with Ionic 4 and React JS with capacitor.

Ionic has been gaining popularity in the last few years, and rightfully so. Making apps in Ionic is a breeze compared to Native languages (Java / Swift). Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.

React JS has come at a good time helping the developers to build highly engaging web apps and user interfaces quickly and efficiently. It allows you to break down the components and create a single page application with less coding. It is mostly popular for its shadow DOM, which it uses for limited scope DOM manipulation, which makes React apps faster. It is due to these major advantages that React JS has gained much spotlight.

For many years Ionic has stuck with Angular framework. But with Ionic 4, it has broken free of the framework restriction. Now Ionic 4 supports Angular, React and Vue JS frameworks.

In February 2018 the Ionic team announced Capacitor. Capacitor allows you to make your frontend builds run everywhere, for example, iOS, Android, Electron and in the browser as a progressive web application (PWA) using any underlying framework.

Ionic Capacitor is an open source framework innovation to help you build Progressive Native Web, Mobile and Desktop apps. Alternatively, Apache Cordova (also known as PhoneGap) does the same for accessing native features of the device from the mobile WebView.

Benefits of using Capacitor in IONIC App

1. As you know, starting from Ionic Framework v4, you can use any UI framework of your choice — Angular (Default), ReactJS and Vue as of now. This would majority help the software development industry, making it easier for them, to find any web developer, to hop-on and start coding with minimal or zero learning curve to build and publish hybrid native apps.
2. Ease of integrating native controls. Capacitor is aiming to make it easier to include native user interface controls wherever desired. For example, if you wanted to use a native menu rather than using the browser to create that interface.
3. Native functionality is available immediately. When using Cordova, you need to wait until the device is ready before making calls to native functionality (e.g. by using platform.ready()). Capacitor will export JavaScript on app boot so that this is no longer required.
4. PWA Compatibility. There has been a huge movement for Progressive Web Applications recently. They are starting to receive more support from browsers, and more tools are starting to pop up to help people build PWAs. One cool thing about a PWA is that it can also easily be bundled as a native application and access native functionality (using Cordova/Capacitor). Native code will not work when running as a PWA through the browser, though. This can make maintaining a single codebase for a project that will be distributed as a native application and as a PWA (and perhaps even as a desktop application as well) difficult. With Capacitor as the runtime layer, it will be able to gracefully handle any error that arises from attempting to access native functionality in an environment that does not have it.

Capacitor Requires Dependencies

The base requirements

are Node v8.6.0 or later, and NPM version 5.6.0 or later (which is usually automatically installed with the required version of Node).

Capacitor relies on using the npx command, which is only available in version 8.3.0 or higher of Node. You likely already have Node installed, so the easiest way to switch between Node versions is to install n:

npm install -g n

iOS Development

For building iOS apps, Capacitor requires a Mac with Xcode 10 or above. Soon, you’ll be able to use Ionic Appflow to build for iOS even if you’re on Windows.

Additionally, you’ll need to install CocoaPods (sudo gem install cocoapods), and install the Xcode Command Line tools (either from Xcode, or running xcode-select --install).

Once you have CocoaPods installed, update your local repo by running pod repo update. You should run this command periodically to ensure you have the latest versions of CocoaPods dependencies.

As a rule, the latest version of Capacitor always supports the last two iOS versions. For example, iOS 12 and iOS 11. For support for older versions of iOS, use an older version of Capacitor (if available).

Android Development

First, the Java 8 JDK must be installed and set to the default if you have other versions of the JDK installed. Java 9 does not work at the moment.

Android development requires the Android SDK installed with Android Studio. Technically, Android Studio isn’t required as you can build and run apps using only the Android CLI tools, but it will make building and running your app much easier so I strongly recommend using it.

Android version support for Capacitor is more complex than iOS. Currently, it is targeting API level 21 or greater, meaning Android 5.0 (Lollipop) or above.
As of January 2018, 5.0 or greater represented over 75% of the Android market, and this percentage is growing quickly. By the time Capacitor is production ready, this percentage should be much higher.

Also, Capacitor requires an Android WebView with Chrome version 50 or later.

Simple Recipe For build App with IONIC and React

1. Create a new react Project

To create a new React project with create-react-app, you can either use npx or install create-react-app globally:

npx create-react-app react-ionic --typescript

OR

$ npm install create-react-app -g
$ create-react-app react-ionic --typescript

2. Open the Project in code editor of your choice

$ cd react-ionic
$ code .

3. Run the project in browser

npm run start

This command will search start script in your package.json file and run the command you mentioned in your start script . E.g.

“start”: “react-scripts start”

react-scripts start will build your code in development mode and run it on your browser

so now you can able to see this screen on your browser

4. Installing Ionic in our React app

Till now we have not included Ionic anywhere. This step included Ionic in the project.

npm install @ionic/core @ionic/react

5. Install React dependency of React Router with types

React router is required for navigation purpose

npm install react-router react-router-dom @types/react-router @types/react-router-dom

6. Using Ionic with React

In this step, we will start coding and after this blog we will able to make Ionic — react app with basic React Library ( React Router )

At this stage, we can use Ionic like any other dependency in our project. Each component has been individually exported and can be imported as such.

1. Firstly, head over to index.tsx and add the appropriate styles within @ionic/core:

2. Then, inside of App.tsx, we can import the Ionic components and use them as we wish!

3. Now time for importing Route in app ! So inside our App.tsx, we can import React Router Dependency and add Routes

4. Now we will use Ionic UI components in our app. So just make one folder called Signin in your Signin folder Create two files named Sign.tsx and Sign.css.

6. Here’s the results of our hard work:

We are almost ready with our first page in Ionic 👨‍🍳 . The Ionic React app is cooked and ready 🥘 🥘 🥘 🥘

Cats ! 🙄

Now we will learn how to make build for IOS and android.

Building your App for PWA

Building web code

Capacitor does not have any built-in feature to build web code. Instead, you will use your framework’s build process of choice.

Regardless of your build process, I recommend adding a build script to your package.json to enable the standard frontend build command:

{
  "scripts": {
    "build": "command-to-build (ex: webpack, tsc, babel, etc.)"
  }
}

npm run build

This builds your Progressive Web App if you’ve configured Progressive Web App support already.

Building android app

Copying Web Code — Once your web code is built, it needs to be copied to each native project:

npx cap copy

This should be run each time you perform a build. Feel free to add this command to the end of your build script in package.json like this

"build”: “react-scripts build && npx cap copy”

Creating Android Platform for Capacitor

By default, an Android project is created for every Capacitor project. If you are adding Capacitor to an existing project, you can manually add the Android project using

npx cap add android
npx cap sync

The sync command updates dependencies, and copies any web assets to your project. You can also run

npx cap copy

To copy web assets only, which is faster if you know you don’t need to update native dependencies.

Building Native Project

Currently, Android relies on Android Studio (or, optionally, the Android CLI tools) to build the app:

npx cap open android

Once Android Studio launches, you can build your app through the standard Android Studio workflow.

To run the app on your device, click on build icon in Header, connect your app to system and enable USB debugging on your device. This will run app on your device.

Building IOS app

Copying Web Code

Once your web code is built, it needs to be copied to each native project:

npx cap copy

This should be run each time you perform a build. Feel free to add this command to the end of your build script in package.json like this.

“build”: “react-scripts build && npx cap copy”

Creating iOS Platform for Capacitor

By default, an iOS project is created for every Capacitor project. If you are adding Capacitor to an existing project, you can manually add the iOS project using

npx cap add ios
npx cap sync

The sync command updates dependencies, and copies any web assets to your project. You can also run

npx cap copy

To copy web assets only, which is faster if you know you don’t need to update native dependencies.

Building Native Project

iOS relies on Xcode to do the final app compile

npx cap open ios

Once Xcode launches, you can build your finally app binary through the standard Xcode workflow.

Conclusion

In this post, we learnt how to integrate Ionic in a React app, as well as in a React progressive web app. We also learnt how to make Android and IOS build using capacitor.

Stay tuned for more Ionic 4 blogs !

Happy Coding.🤓👍🏼

This blog was originally posted on enappd.com

Next Steps

Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next

• How to implement Twitter login in Ionic 4
• How to implement Facebook login in Ionic 4
• How to implement Phaser game framework in Ionic 4
• How to implement multi-language text in Ionic 4
• How to implement Stripe payment in Ionic 4
• How to implement PayPal payment in Ionic 4
• How to implement Pedometer in Ionic 4
• Integrate Apple Pay in Ionic 4
• Integrate Razorpay in Ionic 4

Need FREE Ionic 4 Starters?

You can also find free Ionic 4 starters on our website enappd.com

• Free Chat Themes Starter for Ionic 4
• Free Ionic 4 — Phaser game framework integration
• Ionic 4 PayPal integration
• Ionic 4 Stripe integration
• Ionic 4 Razorpay integration
• Ionic 4 Apple Pay integration
• Ionic 4 Twitter Login
• Ionic 4 Facebook Login

You can also make your next awesome app using Ionic 4 React Full App

References

• Ionic documentation
• Capacitor documentation