This dev tip is brought to you by the developer of MoneyPhone: Personal Expense Tracking for Android and iOS. Consistently spend less than you earn each month and get your finances under control when you start monitoring your expenses with MoneyPhone!
Hello There Dear Internet Friend,
This post is more of a sticky note / bookmark for my own personal reference, however, maybe it will be of some use to fellow Apache Cordova and budding ReactJS developers. If you happen to be getting into hybrid app development using Apache Cordova and are interested in integrating ReactJS into your project, one problem you may encounter is that the tooling for both ReactJS and Cordova are a bit complicated. For example, when creating a new ReactJS project you typically use the command line program create-react-app to bootstrap a new project. Likewise, Cordova uses its own command line program for bootstrapping projects. Unfortunately, the starter project skeletons that these tools create aren’t exactly compatible. Think about how complicated this really is:
- Then you need to compile your web-based app into a native app using Cordova.
Essentially, you have to compile everything, then compile it all again! Double Compilation
Which brings us to this blog post! I’ve found several resources out there on the web that look like good places to start if you are having trouble with this complicated toolset and build process:
Resources on ReactJS + Apache Cordova
- PhoneGap and React.js | PhoneGap Day US 2016
- cordova-create-react-app by John Zhou
PhoneGap & ReactJS @ PhoneGap Day US 2016
cordova-create-react-app Tutorial by John Zhou
UPDATE (11/3/2019): I was able to successfully run my ReactJS web application as a hybrid mobile application using Apache Cordova. How I did it was:
- Used “$ npm run build” to produce a production build of my ReactJS app for distribution, and then…
- Instead of deploying the build to a web server, I copied the contents of my ReactJS app’s build directory over to my Cordova app’s “www” directory (the “www” directory needs to be empty).
Two other crucial steps were adding a script tag importing cordova.js in the ReactJS app’s index.html file, and to add a
"homepage": "./" key value pair in the package.json file of the ReactJS project. I’ll try to write/film a more detailed follow up blog or vlog post about this soon. But for now, here is the referenced I used to figure out how to do all of this! (I did not follow it exactly): Creating Structure for Create react app and Cordova