I’ve been working on a better way to let customers find the correct products in my wife’s cabinet store. To get the layout and and functionality I wanted, I decided to use a React app inside a plugin and connect it with the WooCommerce Store API. The only trouble I ran into was I could not get products to actually add to the cart. Part of the problem was a cookie has to be set in order to add a product and that did not happen when I was testing the app locally.

One thing I noticed while working on this was I could “build” the app and then when I ran it inside my WordPress test site, it would set a cookie and access the cart. As a workaround, I set up a NPM command using the npm-watch package. Here’s what I did to get this working.

1. In Terminal or the shell tool of your choice, install watch into your project with npm install watch --save.
2. Next edit your package.json file and in the “scripts” section, add this:

"watch": "watch 'npm run build' ./src"

Change the src to match the folder where your React app is being developed. Then when you’re ready to work, in your terminal run npm run watch. Now anytime you save a file in the src folder, the command to make a build will run. With that, I was able to have a cookie set and add products to the cart.