TODO:
- Wrap our app into React/Redux/Webpack/webpack-dev-server
I will show you only basic ( tricky ) moments. I will not show you all react page because i will take a lot of time.
Basic moments:
- All pages ( Main, About, Tray ) was wrapped up into
React. About and Tray page is very simple but i was already setup webpack and do not want to use pure JS in one plage ( about_page.html ) and JSX in another ( main_app_page.html ) - Currently to start developing you should launch two command instead of one:
npm run electron - launch electron app
npm run browser - launch webpack in live-reloading mode.
- For
electron-appi was not use webpack. Because setup and launch webpack takes a lot of time and contains a lot lines of code. - Applying Live-reloading for React/Redux led to the next: HTML files have become a bit more complicated to look. Now they contains only react-root element with compiled.js (live-reloading) file
- Also Header component was reused on two different pages. (Main page and About page.)
Window action buttons
Here is updated commands to launch and build:
package.json
...
"scripts": {
"clean": "rm -rf app/electron-app/ && rm -rf app/browser-app/ && rm -rf dist/",
"browser": "NODE_ENV=development webpack-dev-server --config webpack.config.js --hot --inline",
"electron": "NODE_ENV=development electron ./electron-app/js/index.js",
"postinstall": "install-app-deps",
"publish:browser": "webpack --config webpack.config.pro.js",
"publish:electron": "cp -R electron-app/ app/electron-app/",
"publish:osx": "build --x64",
"publish:dist": "npm run clean && npm run publish:browser && npm run publish:electron && npm run publish:osx"
},
...
electron-app/pages/about_page.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.remote = require('electron').remote;
window.shell = require('electron').shell;
</script>
</head>
<body>
<div id='react-root'></div>
<script>
var bundlePath = '../../browser-app/dist/js/about.js';
if (process.env.NODE_ENV === 'development') {
bundlePath = 'http://localhost:8080/browser-app/dist/js/about.js';
}
var js_script = document.createElement('script');
js_script.src = bundlePath;
js_script.async = true;
document.body.appendChild(js_script);
</script>
</body>
</html>