How To Set Up a New Project With React & Capacitor.js

Capacitor is a tool that enables developers to make their frontend builds run on multiple platforms, including mobile (iOS and Android), desktop (Electron), and web (Progressive Web Applications). It also provides a high-quality API to work with native functions within apps, such as accessing the camera or device information.

One of the benefits of Capacitor is that it is not tied to any particular UI framework, so you can use it with any existing web project, framework, or library. Developers using React in their Capacitor app have access to a set of useful, community-maintained React Hooks to access Capacitor APIs in their React function components. For example, you can use the useFilesystem hook to access the filesystem API. You can also extend Capacitor with your own native plugin APIs.

Capacitor provides a solution for anyone wanting to create one application (or convert an existing site) to one that translates well on both desktop and mobile platforms. It was also something I needed to learn for a project recently, so I thought I'd share my setup tutorial with you...

Prerequisites

To get started, you should:

Have some basic knowledge of React, JavaScript, ES6 syntax, the command line.
Have installed Node and Capacitor.
If you want to run your app on iOS, you should have a macOS with Xcode.
If you want to run your app on Android, you should install Android Studio.

Setup

The first step is to set up a new React project using the official create-react-app CLI tools. You can use the following commands in the terminal to create a basic React app:

npm install -g create-react-app
create-react-app react-with-capacitor

After creating the project, you need to open it and run it in development mode using the following commands:

cd react-with-capacitor
npm install
npm run start

To add Capacitor to your project, you can install it using NPM with the following command inside the project folder:

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

Then, you need to initialize Capacitor with information about the application. For example, I will give the app a name of react-capacitor-example, and I want the app package ID to be c__om.example.reactCapacitor__:

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

This will complete in the terminal and you'll see a prompt asking you if you want to create a free Ionic account, which you can just skip for now if you want.

You should now have a capacitor.config.json file that looks like this:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.reactCapacitor',
  appName: 'react-with-capacitor',
  webDir: 'build',
  bundledWebRuntime: false
};

export default config;

You can now install the platforms you would like to develop for such as iOS or Android:

npm install @capacitor/ios
npm install @capacitor/android

Then build the project and add it to the iOS or Android platform using the following commands:

npm run build

// for ios
npx cap add ios

// for android
npx cap add android

After the above steps, you should see an ios and/or android folder in your project! Sweet!

Running the Project

Now that your project is set up, you can run it to check that all is working as it should be. To run it as a React app in your browser, just run:

npm start

To run on iOS:

Open Xcode and select open a new project
In the finder that opens, navigate to the iOS folder in your project, go in the App folder, then open the .xcworkspace file
Once open, press the play button at the top of xcode and select an emulator to open
You should now see your Capacitor app load in the emulator!

To run on Android:

Open Android Studio, choose to open an existing project and select your project folder
Start a new emulator
Select the "Run app" button (looks like a play button) from the top menu
You should now see your Capacitor app load in the emulator!

Capacitor doesn't have hot reload working out of the box, but you can install Live Reload to make your development process easier.

And that's how you set up a new project with React and Capacitor!

I hope that was helpful, and be sure to check out the official documentation to see what else you can do with it