Chrome Extension + create-react-app live reload

Question

Any advise on how to achieve live-reloading when implementing a Chrome Extension with create-react-app? Currently I yarn run build every time there is a change.

Answer 1

I managed to do that using create-react-app by:

npm i npm-watch --save-dev

Then in the package.json

{
    "name": "react-app",
    "version": "0.1.0",
    "private": false,
    "devDependencies": {
        "npm-watch": "^0.1.8",
        "react-scripts": "0.9.5",
    },
    "dependencies": {
        "react": "^15.4.2",
        "react-dom": "^15.4.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "watch": "npm-watch" //add this to the script
    },
    "watch": {  //add this outside the script
        "build": "src/"
    }
}

Answer 2

I got this working with fswatch on Mac (had to brew install fswatch):

fswatch -o ~/$PATH_TO_YOUR_PROJECT/src | xargs -n1 -I{} npm run build

This will run npm run build anytime the src directory changes (which is what I was doing manually beforehand anyways)

Note: my manifest is pointing to the build directory for my popup.