Deploying a React App to Cordova

14 July 2015

I’ve been building out a webapp using react. It’s completely responsive and developed in device mode.

Once I was happy with it’s behavior in browsers I decided it was time to port it as a native mobile app. Below we assume the whole application has been compiled with Browserify or Webpack into an app.js file. I’m also assuming es6 syntax and inline styles.

index.html

declare cordova.js before your bundle. This is automatically injected by Cordova at runtime.
declare a viewport meta tag to prevent resizing
declare a Content Security Policy. Read Cordova-plugin-whitelist.

<html>
  <head>
    <meta name="viewport"
          content="user-scalable=no,
                   initial-scale=1,
                   maximum-scale=1,
                   minimum-scale=1,
                   width=device-width">

    <!-- Allow everything in development -->
    <meta http-equiv="Content-Security-Policy"
          content="default-src *;
                 style-src 'self' 'unsafe-inline';
                 script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  </head>
  <body>
    <script src="cordova.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Javascript

First thing to note is that cordova has it’s own hooks for device lifecycle events. Checkout Cordova Events.

Specifically, we must delay execution of our webapp until the deviceready event executes. Wrap your applications entry point like so

function startApp() {
  // your app logic
}
if (window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

for later versions of iOS you’ll want to add some top padding to your app.

// somewhere in your app
if(window.device && device.platform === 'iOS') {
  styles.base.paddingTop = '20px'
}

wherever you have onClick handlers you’ll have to add an onTouchEnd handler. See React.js Events

<i
  onClick={() => this.transition()}
  onTouchEnd={() => this.transition()} >
</i>

declare React.initializeTouchEvents(true)
On mobile you have to be aware of the user’s connectivity. Use window.navigator.onLine and provide feedback to the user if they are offline.

Cordova project setup

Install the cordova cli tool npm install -g cordova

From your project directory

cd ..
cordova create <new dirname>
cd <new dirname>
cordova platform add ios && cordova platform add android
cordova plugin add cordova-plugin-device && cordova plugin add cordova-plugin-whitelist
Backup or rename the www directory
Symlink the original project to www ln -s ../reactProject www
Finally we can test the app in the simulator cordova emulate ios

You’ll want to customize config.xml. Especially the id, name, description and author tags. Read about ids under Additional Versioning.

If you plan on using git for this ignore the plugins/ and platforms/ folders.

App Store Listing

The Google and Apple App Stores require additional information from your app.

Customize your Icons and Splash screens. Read Androids Graphics Assets page. Read iTunes Connect’s Screenshot Properties scroll to it.

Cordova Icon and Cordova Splash are useful for generating the images needed. You’re going to want an icon of size 1024 x 1024 pixels and a splash image 1242 × 2208 pixels.

Android

To build an Android release cordova build --release <platform>.

Then you have to sign the app Signing Android.

Google’s developer program costs $25.

iOS

For iOS I find it easier to use xcode to push to the app store.

Read Publishing iOS.

You’ll want to make an app ID and an iTunes Connect app profile. Both are accessible from developer.apple.com.

When you are uploading screenshots for your iOS store listing it’s useful to know cmd + S in the iOS simulator saves a screenshot to your desktop.

Apple’s developer program costs $100.

Useful links:

If you need help solving your business problems with software read how to hire me.