Create-react-app: How to use react-scripts in combination with electron?

[s-a]

I try to combine a create-react-app started with react-scripts with electron. Is it possible to setup my electron project to run from localhost in development mode? And how to keep node functionality like fs and __dirname alive through webpack build process?

[adambowles]

https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

[cdaringe]

if you want your renderer process to use actual node or electron APIs, you'll need something like this

[Timer]

Closing as answered, thanks guys!

[linonetwo]

FWI https://github.com/cdaringe/electron-renderer-react-scripts-target/issues/3
Now it can run both in browser and electron.

[linonetwo]

For two package.json architecture (one for js, one for native modules), you should be able to ignore src/node_modules.

Here is my updated config-rewired.js

// @flow
const path = require('path');

const ignorePath = function (exclude = [], config) {
  const rule = config.module.rules[0];
  if (!rule) {
    console.log('js related rule not found');
    return config;
  }
  rule.exclude = exclude.concat(rule.exclude || []);
  return config;
};

module.exports = function override(config, env) {
  // Make it run in electron renderer process
  // If we want electron start, we will set cross-env BROWSER=none
  if (process.env.BROWSER === 'none') {
    delete config.node;
    config.target = 'electron-renderer';
  }

  config = ignorePath([path.resolve(__dirname, 'src/node_modules'), path.resolve(__dirname, 'src/~')], config);

  if (env === 'production') {
    console.log('⚡ Production build with Optimization.');
  }

  return config;
};

[joshuapinter]

Btw, if you need to use native modules, I had to include them using remote like so:

const odbc = require( "electron" ).remote.require( "odbc" );