Getting Started With Capacitor Using React

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).

Also, Capacitor provides a high-quality API to work with native functions within your apps. For example, you can get access to the camera and it means you still get this access to every platform.

In the official Capacitor documentation you can find a well-described tutorial on how to use Capacitor with Ionic, but in our tutorial, we will check how you can add Capacitor to your existing React app. We will create a simple React app with Capacitor and run it on iOS and in the browser as PWA.

If you’re interested in integrating Capacitor into your Vue.js app you can go with this tutorial that I had previously written.

Getting Started

To follow this tutorial you should have the basic fundamentals of the command line, React, JavaScript, ES6 syntax, installed Node, Capacitor and have macOS with Xcode (if you want to run this app on iOS).

All the following was done with the next requirements: Node v9.10.0, Capacitor 1.0.0-alpha.x, NPM/NPX v.6.0.1, YARN v.0.24.5.

Important: In this tutorial, we used Capacitor version Alpha, so it’s not production ready.

Scaffolding a React.js Project using the CLI

Let’s setup a new React project using the official create-react-app CLI tools. We will use the pretty simple scaffold project with minimum configurations. We’ll run the following command in the terminal:

npm install -g create-react-app

Then we can create a simple project using the installed CLI tools. Let’s name our project as react-capacitor-example. In the Terminal, execute:

create-react-app react-capacitor-example

If all was good, you will see a message about the successfully installed project.

Next we need to open your newly created project and try to run it in the development mode:

cd react-capacitor-example
npm install
npm run start

Now you should see the following in your Terminal:

After this, you can check the project in your browser. You can open the browser on port 3000 and should see the default React project:

If everything’s the same as above - we can move on to setting up Capacitor.

Setting Up Capacitor

We can add Capacitor using NPM with the following command inside the project folder:

npm install --save @capacitor/cli @capacitor/core

After this, we need to initialize Capacitor with information about the application. The app name will be react-capacitor-example, the app package ID – com.example.reactCapacitor.

npx cap init react-capacitor-example com.example.reactCapacitor

You will see the message:

Your Capacitor project is ready to go!“.

Now we can add the platforms to our existing React app, but before this, we need to change the default build folder in the Capacitor configuration.

We can easily fix this by changing the webDir property in capacitor.config.json. Just replace www to build. The capacitor.config.json should look like this:

Let’s make sure of our changes by building the project using the following:

npm run build

Now we can add the iOS platform using the next command:

npx cap add ios

That is all for adding Capacitor to our project. In the next section, we will add simple native functionality using the Capacitor API.

Using the Capacitor API

There are a number of Native APIs available in all Capacitor apps (you can check all of them in the official Capacitor Documentation), but in our app, we will focus only on the integration of the Modal and Device APIs. This example will be enough to understand how to work with the rest of Capacitor APIs.

A Modal is a dialog box. It’s used in the most modern apps. In our app, we will show the name and unique ID of the device in the Modal by pressing the button.

First of all, we need to include the described APIs in the App.js component: