How do you add react developer tools to an Electron Webpack build

Question

Similar to this although it only shows how to download the developer tools in one instance. I want to load this in every time I start the app in development. I am using webpack.

I get the error that manifest.json is not open.

with

const addDevTools = () => {
  if (mainWindow) {
    // Open the DevTools.
    mainWindow.webContents.openDevTools();
    require("devtron").install();
    require("electron-debug")();

    const installer = require("electron-devtools-installer");

    const extensions = [
      "REACT_DEVELOPER_TOOLS",
      "REDUX_DEVTOOLS",
    ];

    for (const name of extensions) {
      installer.default(installer[name], true)
      .then((n: any) => console.log(`Added Extension:  ${n}`))
      .catch((err: any) => console.log(`An error occurred: ${err}`));
    }
  }
};

Answer 1

I ended up finding the answer in the electron-react-material-ui github repo. in the /app/main.development.js file.

const installExtensions = async () => {
const installer: any = require("electron-devtools-installer");
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = [
    "REACT_DEVELOPER_TOOLS",
    "REDUX_DEVTOOLS",
  ];
  return Promise.all(extensions.map((name) => 
  installer.default(installer[name], forceDownload)))
    .catch(console.log);
};

then the app.on ready

app.on("ready", async () => {
  if (process.env.NODE_ENV === "development") {
    await installExtensions();
  }
  createWindow();
});