Electron Forge with react?

Question

Is there any simple way I can setup an app with Electron-Forge and React? I am usin the webpack template but don't know what to do to get jsx to work. I have the react stuff in renderer.js

Does this help ? https://ankitbko.github.io/2019/08/electron-forge-with-react-and-typescript/ — Harmandeep Singh Kalsi, Jun 20 '20 at 17:59
Well, I didn't wan't to use typescript and I figured it out. — I'veGotRoot, Jun 20 '20 at 23:25

score 16 · Accepted Answer · edited Jul 01 '20 at 02:29

I figured it out,

    yarn create electron-app test --template=webpack
    cd test

Then I installed babel with:

    yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --d

and react with:

    yarn add react react-dom

Created a .babelrc in project root with the following code:

    {"presets": ["@babel/preset-env", "@babel/preset-react"]}

and added the following to webpack.rules.js:

    {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  }

changed renderer.js to renderer.jsx and changed stuff in package.json from this:

    "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.js",
              "name": "main_window"
            }
          ]
        }
      }

to this:

    "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.jsx",
              "name": "main_window"
            }
          ]
        }
      }

and finally replaced renderer.jsx with this:

    import './index.css';
    import React from 'react';
    import ReactDOM from 'react-dom';
    console.log('Loaded React.');
    ReactDOM.render(<div>Test.</div>, document.getElementById('root'));

and replaced index.html with this:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>

I followed your code and it works. However, when I add sub-components and import (i.e. import Test from "./test"; It doesn't resolve the module unless I add ".jsx". Did you have the same problem? — Greg, Apr 10 '21 at 21:32
@Greg I am having the same problem. Did you find any solution for the same? — Sathishkumar Rakkiyasamy, Jul 21 '21 at 07:15
@SathishkumarRakkiasamy and @Greg no need just use `js` instead of `jsx`. Because he validate the regex pattern already `/\.(js|jsx)$/`. So use `js` for all react file. And change the `webpack.rules.js` file to `renderer.js` instead of `renderer.jsx`. And don't forget `import React` for each react component file. Otherwise it will not show. better open devtools [mainWindow.webContents.openDevTools()](https://www.electronjs.org/docs/latest/api/web-contents#contentsopendevtoolsoptions) on your main.js then do your code. myself it will more helpful to find this error — prasanth, Dec 05 '21 at 16:41
is itt using React-native-web also with the same step? Cause I have a existing React-native-web in mobile. which to use this — ken, Dec 23 '21 at 19:51

Sathishkumar Rakkiyasamy · Answer 2 · 2021-07-29T19:40:27.293

1.Create Webpack template using

yarn create electron-app my-new-app --template=webpack && cd my-new-app

2.Install dependencies

yarn add --dev @babel/core @babel/preset-react babel-loader

3.Add the following to webpack.rules.js

 {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },

4.Add React and React-dom

yarn add react react-dom

For more details refer electron-forge documentation

Electron Forge with react?

2 Answers2