cordova-cra-live-reload

Live reload when developing on Cordova + CRA

Usage no npm install needed!

<script type="module">
  import cordovaCraLiveReload from 'https://cdn.skypack.dev/cordova-cra-live-reload';
</script>

README

npm version

How to install it

1) Install package as dev dependency in your Cordova project

$ npm install cordova-cra-live-reload --save-dev

2) Create live-reload-config.js file in the root directory of your Cordova project

const path = require("path");
const { getLocalAddress } = require("cordova-cra-live-reload");

module.exports = {
  reactPath: path.join(__dirname, "../frontend"), // path to your React project directory
  templateData: {
    CONTENT_SRC: {
      build: "index.html",
      run: `http://${getLocalAddress()}:3000/`
    }
  }
};

3) Rename config.xml file to config.template.xml

4) Inside the config.template.xml file change content element

<content src="{{CONTENT_SRC}}" />

5) In package.json add following scripts

{
    "dev": "cordova-cra-live-reload run",
    "build": "cordova-cra-live-reload build"
}

How to use it

Start react dev server and run cordova app

$ npm run dev android

Build cordova app

$ npm run build android

Note: Since the library uses Cordova CLI, dev and build commands takes same parameters as Cordova run and build commands