skip to content
Notes && Anecdotes
A decorative, semi-related stock photo that adds less value than this comment.

Porting a React app to Phonegap

cordovaes6mobile appphonegapreact

If you already have a React web app, and consider porting it to a proper phone app, you should consider using React Native. However, you could also use PhoneGap/Cordova, which is done in a heartbeat:

How?

  1. The initial steps of setting up Phonegap

  2. Open PhoneGap and create an app.

  3. Open **www/index.html **in the generated app, and insert

    <script src="js/bundle.js"></script>

    before the import of js/index.js

  4. You also need to allow the use of eval, by making sure the line regarding Content-Security-Policy looks something like this:

    <meta
    	http-equiv="Content-Security-Policy"
    	content="default-src \* 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src \*"
    />
  5. Copy** your webpacked bundle.js file from your original react app to **js/bundle.js** in the generated PhoneGap app.

  6. In js/bundle.js, wrap the whole content inside a function that you can later call.

    var runOriginalApp() {
         // YOUR-ORIGINAL-BUNDLE-JS-CONTENT
    }
  7. In js/index.js, call this function inside onDeviceReady:

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        runOriginalApp();
    },
  8. If you’re doing api calls as well, ensure you are allowed to contact your api with a line such as this in config.xml:

    <allow-intent href="*://*api.your-domain.com/*"/>

    and for that you might need to install the whitelist plugin

    cd ./your-phonegap-folder
    cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git
  9. At last, make sure any API-calls inside your original code goes to that domain name, using the full urls, i.e. http://api.domain.com (not //api.domain.com or /api/posts)

  10. Compile it to an .apk by installing phonegap with npm and running compile:

    npm install phonegap -g
    phonegap cordova build android
    phonegap cordova build ios

Voila! It’s now stored as an apk in:

  • platforms/android/build/outputs
  • platforms/ios/build/