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
Electron Forge with react?
Asked Answered
Does this help ? ankitbko.github.io/2019/08/… –
Ada
Well, I didn't wan't to use typescript and I figured it out. –
Verdugo
This guide covers the topic well and thoroughly and is confirmed working as of July 29th, 2024: sitepoint.com/electron-forge-react-build-secure-desktop-app –
Lemnos
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? –
Simmie
@Simmie I am having the same problem. Did you find any solution for the same? –
Tremaine
@SathishkumarRakkiasamy and @Simmie 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() on your main.js then do your code. myself it will more helpful to find this error –
Drona 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 –
Cretonne
not working with react 18 and electron forge 6 –
Vickey
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
© 2022 - 2024 — McMap. All rights reserved.