Cordova + create-react-app without ejecting react

19th of June 2018

According to many tutorial, when you want to use Cordova with create-react-app you should eject the create-react-app. But that was not the way I wanted to go. So instead of it, I have decided to keep create-react-app, then create cordova project and copy-paste this project into create-react-app project. So far it works like a charm, so here is the tutorial.

Cordova + create-react-app tutorial

Install Java SKD, note that you need exactly version 8.
Install the Create React App CLI.

npm install -g create-react-app

Install the Cordova CLI.

npm install -g cordova

Create the project.

create-react-app tutorial

Create Cordova Project

cordova create tutorial com.example.tutorial Tutorial

And now comes the little trick. Take everything except package.json from your cordova project and paste it into your creat-react-app project. Now you have working cordova in your create-react-app. But some things have to be adjusted in the create-react-app package.json. We have to merge these two.

{
  "name": "com.example.tutorial",
  "displayName": "Tutorial",
  "description": "",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "homepage": "./",                               // <--- Notice this
  "dependencies": {
    "cordova-android": "^7.0.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "move": "mv build www || move build www",     // <--- Notice this
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
    },
    "platforms": [
      "android"
    ]
  }
}

Notice the “move” command that is added to scripts. All it does is move content of build folder into www folder. That is the place where Cordova and create-react-app are connected. By default create-react-app builds into the dist folder, but Cordova needs www folder. I think it’s really small shorthand in compare with ejecting create-react-app and you can really easily automate it with any build tool you like.

And notice the “homepage”: “./” . It’s because your files will be served from file:// you have to add this line to your package.json (https://github.com/facebookincubator/create-react-app/issues/1094):

Add this line to your index.html

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

Bonus Tip

If you are using <Router> in your project change that to <HashRouter> otherwise you’ll see a blank display as nothing will get rendered to the screen.