Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Electron Forge with react?

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

like image 326
I'veGotRoot Avatar asked Jun 20 '20 17:06

I'veGotRoot


People also ask

Can I use Reactjs in electron?

Electron is a cross-platform desktop application framework. It is used to build desktop applications with the JavaScript language. It's definitely also possible to use JavaScript frameworks like React and Vue to build desktop applications with Electron.

What does electron forge do?

Electron Forge is an all-in-one tool for packaging and distributing Electron applications. It combines many single-purpose packages to create a full build pipeline that works out of the box, complete with code signing, installers, and artifact publishing.


1 Answers

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>
like image 96
I'veGotRoot Avatar answered Sep 28 '22 10:09

I'veGotRoot