Menu
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
326
asked Jun 20 '20 17:06
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With