i have been trying for days to familiarize myself with the supposedly simple electron framework with react library. however, i have to give up now and offer you to help me.
here is my simple project:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<title>My page</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!-- -->
<div id="root"></div>
</body>
</html>
main.js
const electron = require('electron');
const path = require('path');
const url = require('url');
const {app, BrowserWindow} = electron;
let mainWindow;
// Listen for app to be ready
app.on('ready', function(){
// Create new window
mainWindow = new BrowserWindow({width: 800, height: 600});
// Load html in window
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// Quit app when closed
mainWindow.on('closed', function(){
app.quit();
});
});
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './pages/dashboard';
ReactDOM.render(<Dashboard />, document.getElementById('root'));
src/pages/dashboard.js
import React from 'react';
class Dashboard extends React.Component {
render() {
const {classes} = this.props;
return (
<div className={classes.root}>
Test Message
</div>
);
}
}
export default Dashboard;
package.json
{
"name": "create-react-app",
"version": "3.2.2",
"private": true,
"main": "public/main.js",
"homepage": "./",
"scripts": {
"start": "electron .",
"build": "react-scripts build"
},
"devDependencies": {
"electron": "4.0.6",
"foreman": "3.0.1",
"react-scripts": "2.1.5"
},
"dependencies": {
"@material-ui/core": "3.9.2",
"prop-types": "15.7.2",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-scripts": "2.1.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I can build the application and start it, but the HTML page (Dashboard) is not displayed.
I would be happy about any help.
index.htmlfiles doesnt have script tag with the correspondingbundle.jsfile, that's why it shows empty window :)build- stackoverflow.com/questions/42438171/…