React Static Boilerplate for Cordova / PhoneGap

[n8sabes]

React Static Boilerplate is ideal for use with Cordova / PhoneGap. However, a few changes to the code must be made to support the platforms. It would be great to add cordova support by default, or a build option.

Here is how I got it to work:

1) Create RSB project

git clone -o react-static-boilerplate -b master --single-branch https://github.com/kriasoft/react-static-boilerplate.git MyRSBApp npm install

2) Create Cordova project

cordova create MyCordovaApp com.domain.myrsbapp MyCordovaApp --link-to ./MyRSBApp/public cordova platform add ios

3) Update RSB main.js to run RSB after receiving deviceready event.

function startApp() {
  // Handle client-side navigation by using HTML5 History API
  // For more information visit https://github.com/ReactJSTraining/history/tree/master/docs#readme
  history.listen(render);
  render(history.getCurrentLocation());

  // Eliminates the 300ms delay between a physical tap
  // and the firing of a click event on mobile browsers
  // https://github.com/ftlabs/fastclick
  FastClick.attach(document.body);

  // Enable Hot Module Replacement (HMR)
  if (module.hot) {
    module.hot.accept('./routes.json', () => {
      routes = require('./routes.json'); // eslint-disable-line global-require
      render(history.getCurrentLocation());
    });
  }
}

//
// If running in cordova context, wait for deviceready to start the app, otherwise start immediately
//
if (window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

4) Update RSB index.ejs

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src=".<%= bundle %>"></script>

NOTE: Make sure add relevant cordova meta tags.

5) Run

From RSB project: npm run build

From Cordova Project cordova run ios

6) DEBUGGING: To debug iOS, add an alert() immediately after the html tag in the index.ejs file. When cordova launches and loads RSB, it will halt on the alert() providing time to attach the Safari debugger to the emulator or iOS device before continuing.

<script>alert("Attach Safari Debugger Now");</script>

7) TODO: All MDL, fonts, and other external files must be included within the project itself.

8) TODO: RSB receives an (file) path, not a url path. It needs to be further investigated, but as a temporary workaround (hack):

// HACK
history.listen(render);
let loc = history.getCurrentLocation();
loc.pathname = '/';
render(loc);

[MadeInMoon]

Indeed this boilerplate is a great start for a cordova app!
It makes now 7 months since this issue was opened, anyone news on it (doc link, PR, etc.) ?

@n8sabes thank you for sharing this!

[MaxInMoon]

Just a question about nested routes (eg. /user/profile/preferences), do they work with browserHistory? With react-router v3 I had to put hash history in order to prevent few problems with nested routes (like a not found using window.reload()) on cordova.