jschr / electron-react-redux-boilerplate Goto Github PK

Hello,

I wrote an app and it worked okay in development mode, (everything renders fine).

But when I made an installer for windows with npm run pack:win after it finishes generating

I copied the setup to windows PC and installed, the process was smooth (no errors/warnings/exceptions).

After installation program starts and the window is blank! Restarted PC & still blank.

I'm not sure what is wrong but here is the full project.

If I should add my development system is ArchLinux.

Please help, Thanks!

Electron 2+ contains some security fixes. I took a stab a updating but ran into a bunch of warnings / errors trying to get browser sync working with a content security policy.

I gave up trying to fix the warnings for dev–progress here.

I'll be away for a couple weeks so I can pick this up after.

I cloned the repo (OS X 10.10.5, node v3.2.0) and try to run it, but I have troubles with the packed app.

When starting the app with npm run serve the client is functional and I receive a greeting after clicking on the "Log in" Button.

When I build with npm run pack I receive a success build, which I can start and which shows the login form. However nothing happens when I press the "Log in" button.

Do you have any idea what could be wrong with the build?

I notice the project is using Electron 3.0.0. This has not caused any issues. I'm just wondering if you will be updating to the latest version.

I tried updating to latest electron, but then boilerplate doesn't load. I've also updated all dependencies and devDependencies but it nothing loads unless Electron is version 3

It seems that [email protected] was the last version shipped with lib folder and we do import browser-sync/lib/connect-utils from it. I think changing lib -> dist should do the trick.

Compare

1. https://unpkg.com/[email protected]/
2. https://unpkg.com/[email protected]/

First off, thanks for this excellent boilerplate! I've tried a few and I really like that the project is structured like an Electron project and not like a create-react-app project.
In my project, I've also added MaterialUI and everything is looking great. Now I want to add some custom style sheets. Adding css seems like a no-brainer...but I can't seem to get it to work.

I've tried import './styles.css as with React. Can't find module, no matter where I put the file.

I've tried adding link tags in the index.html file. GET request failed. Cannot find resource, unless file is in app/renderer and build/renderer directories. Once I restart application, the css file is removed from the build folder, even though it is still in app folder.

I'm sure it's got to do with the relative path Electron uses to render assets, but I can't seem to figure it.

Hey Jordan,

I hope things are good with you. This project looks great. Let's chat about this! Pls Skype me!

Cheers,
Austen

Hey @pronebird, the email I have for you doesn't seem to work anymore so pasting it here :-)

Hope you're doing well.

Just want to thank you for helping out with the electron-react-redux-boilerplate repo. I feel bad that I haven't been able to keep it up to date so your work is appreciated! You've made the repo a lot more useful for everyone :)

I think I mentioned this before but in case you are interested or this helps Mullvad, I'm open to transferring the repo to somewhere where it will get more attention.

But no worries if not, I still like helping out other users when I can and the help is always appreciated.

Thanks again!

Best,
Jordan

when I try to do
import "bootstrap/dist/css/" in index, it doesn't allow me to insert bootstrap there. Why?

Prettier while being an opinionated code formatter, still plays the important role in code QA and saves developers from wasting time beautifying their code and arguing about code style.

So let's add it sometime soon, these are scripts we use at Mullvad:

"format": "prettier --write 'app/**/*.js' 'test/**/*.js'",
"check-format": "prettier --list-different 'app/**/*.js' 'test/**/*.js'",

npm run check-format is used in Travis script to verify that the code was formatted, it will simply fail tests if the code is not formatted which should normally prevent the code from being merged to master until fixed by developer.

Somehow after following the starting guide the gulp develop is stuck on the startin 'watch-main-scripts', 'watch-renderer-scripts' and 'watch-html'.

Some bug? or did i miss something from the setup

I really like this boilerplate so far, good job!

I tried import './App.css' and it didnt work.

From what I've googled it seems i need a npm package called css-loader but I dont know how to set it up with gulp.

Thinking of adding CSS modules support. Need something for CSS. Any preferences or suggestions? I think babel needs some plugin to require() CSS.

Hello there!

How can we deploy a vanilla electron-react-redux-boilerplate app as a menu bar app, especially using the menubar package?

For example, based on this example, we can easily create a menubar app by having just main.js to contain

const { menubar } = require('menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('Menubar app is ready.');
});

Where should such initialization code for menubar be placed in the electron-react-redux-boilerplate code? If this is not the right approach, what is the correct way to integrate menubar?

My attempt:

I modified init.js to include some code using the menubar package, as shown below. However, the original boilerplate app still appears as per normal. Furthermore, there is now an icon in the tray, but clicking on it shows an empty white menubar screen.

require('./build/main');

const { menubar } = require('menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('Menubar app is ready.');
});

Thank you very much!

Hey there,

I just cloned this repo and tried to run it via npm run develop and got the following error:

SyntaxError: app/app.js: Unexpected token (16:2)
  14 |
  15 | ReactDOM.render(
> 16 |   <Provider store={store}>
     |   ^
  17 |     <Router history={routerHistory} routes={routes} />
  18 |   </Provider>,
  19 |   rootElement

I'm on Node 7.4.0.

Hi again. I was wondering about the dev script and the main process. "dev": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve", this rerenders or refreshes some process in the build script, and I see the application reloading, but in order for the changes made in the main process to take effect, I have to re-run the dev script. So for example, I can uncomment everything in ./main/index.js while running the dev script. The script will answer by reloading the application, but the build has not updated. Is this your intention or might there be something wrong here?

Thanks again.

31 warnings and 9 errors generated.
make: *** [Release/obj.target/fse/fsevents.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" "--module_name=fse" "--module_path=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64" "--napi_version=6" "--node_abi_napi=napi"
gyp ERR! cwd /Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents
gyp ERR! node -v v12.18.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64 --napi_version=6 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack at ChildProcess. (/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
node-pre-gyp ERR! System Darwin 19.5.0
node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents
node-pre-gyp ERR! node -v v12.18.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=/Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64 --napi_version=6 --node_abi_napi=napi' (1)

[email protected] postinstall /Users/hamiltonwang/Documents/Bitbucket/aiap_builder/node_modules/core-js
node -e "try{require('./postinstall')}catch(e){}"

I am trying to setup boilerplate on Windows 7 Node 4.2.2

 npm ls --depth=0
[email protected] E:\Workspace-Hrishikesh\electron-react-redux-boilerplate
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

I think this is babel error.

I am excited to find your repo because this is using react and redux with electron.
There are many repo with relation to react-redux boilerplate using electron, but I choosed this because this is very good and very useful.
Thanks for your efforts.

When I execute "npm run develop" in command, I can see the electron window, but can't see any ReactComponent such as Login page. There are already react component like login, loggedin, as you made.

In app/index.html
From:

As a result, I can see the changes with style of app section.
But I can't see the works of script tag including reactcomponents.
So right now, I don't see the app/renderer/components/Login.js Component.
So there is empty after executing "npm run develop". And can't see any erros. What's problem?
please give me any clue with relation to this.

Note:
1)I think it is related to c:/users//.electron. Right now I have no files there.
If there should be the files, plz let me know the file's url.
2)Maybe it is related to the version problem.

Thanks a lot. WildorWilliam

Hello, and thanks for your work on this! I just started using this boilerplate and I get some console warnings in the terminal, the same ones I see in electron in the devtools console.

"%cElectron Security Warning (Insecure Resources)", source: /Users/andreaslundqvist/Desktop/electron-react-redux-boilerplate/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/security-warnings.js (128) [24570:1023/194308.792271:INFO:CONSOLE(188)] "%cElectron Security Warning (Insecure Content-Security-Policy)", source: /Users/andreaslundqvist/Desktop/electron-react-redux-boilerplate/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/security-warnings.js (188)

I was wondering if anyone here might know how to disable these warnings from showing up in the terminal console, if possible.

Thanks.

Would the current setup be compatible with Typescript?

README is currently pretty bare.

@pronebird any feedback on what should be included? I might take a stab at it later today.

I using this boilerplate for my electron app.
But when I try to import image files like .png it gets an error
The debugging message is:
Uncaught SyntaxError: Invalid or unexpected token
at new Script (vm.js:74)
at createScript (vm.js:246)
at Object.runInThisContext (vm.js:298)
at Module._compile (internal/modules/cjs/loader.js:678)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:722)
at Module.load (internal/modules/cjs/loader.js:620)
at tryModuleLoad (internal/modules/cjs/loader.js:559)
at Function.Module._load (internal/modules/cjs/loader.js:551)
at Module.require (internal/modules/cjs/loader.js:658)
at require (internal/modules/cjs/helpers.js:20)

And I can't even import .css files
I think it seems like I can only import .js files or node modules
How can I import .png files on js code?

Hi!

Very nice work on this boilerplate :)

I'm getting a blank page when building with run-s private:clean private:compile private:build:mac.
It's happening in the following branch https://github.com/uesteibar/sloth-app/tree/integrate-cli

When running npm start works fine, but not when building. Already tried everything I could think of but I can't manage to make it work. Could you guys give me a hand on this?

Thank you!

if I write require('path to local image'); it is showing error SyntaxError: Invalid or unexpected token I don't know how can I use Url-loader and File-loader with current project as both libraries requires webpack but we are not using webpack.
I used a babel file loader and in .babelrc it set

"plugins": ["file-loader"]

but no luck

what I really want to achieve is that I want to select an image and send it to print using webContents

My Code is

`printAll = () => {

const { remote } = require('electron');
const { BrowserWindow, dialog, shell } = remote;
let printWindow = new BrowserWindow({ 'auto-hide-menu-bar': true });
printWindow.setTitle('Print');
//alert(JSON.stringify());
const imageToEmbed = require(this.state.selectedFiles[0].path);
alert(imageToEmbed);
var my_content = "<img src ={imageToEmbed} />";
var content_template = 'data:text/html;charset=utf-8,<html><head></head><body>' + my_content + '</body></html>'
console.log(content_template)
printWindow.loadURL(content_template);
printWindow.show()
printWindow.webContents.on('did-finish-load', function () {
  if (printWindow)
    printWindow.webContents.print();
});

}`

Please help me,Your template worked with perfection but at last I am not able to do this functionality ,Thanks

Not a big change.
Here is the migration guide: https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5

I am thinking of best practice to get started with boilerplate. Currently we suggest to simply clone repository.

One of my concerns is commit history which is irrelevant for the app that's being built on top of boilerplate.

My take on that is to squash entire commit history into single initial commit, i.e.:

git checkout --orphan new-master master
git commit -m "Initial commit"
git branch -M new-master master

But I can imagine it may complicate synchronization between repositories when new updates or fixes to boilerplate are available for merge.

i use npm install but has error.How can i deal with it?

Hi, this is not issue. I little bit confuse or is it possible can we deploy or can we use this code as website. For example in electron-react-redux-boilerplate give target a specific platform like

npm run pack:mac npm run pack:win npm run pack:linux

similarly can we use npm run build for website? I tried to find out but not found proper solution. Please suggest me how to do this if it possible?

First off....many thanks for putting this together.....just what I have been looking for.

I just cloned a copy of the boilerplate and getting an error when running develop in private:serve. I am running this on Windows 10 x64.

pack:win seems to be fine.

Am I missing something in the configuration, environment or a dependency?

Error log detail:

13 verbose stack Error: [email protected] private:serve: babel-node scripts/serve.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:961:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\Development\Prototypes\electron-react-redux-boilerplate
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "private:serve"
18 verbose node v10.3.0
19 verbose npm v6.1.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] private:serve: babel-node scripts/serve.js
22 error Exit status 1
23 error Failed at the [email protected] private:serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

npm output:

[email protected] private:watch D:\Development\Prototypes\electron-react-redux-boilerplate
npm run private:compile -- --source-maps true --watch --skip-initial-build

[email protected] private:serve D:\Development\Prototypes\electron-react-redux-boilerplate
babel-node scripts/serve.js

[email protected] private:compile D:\Development\Prototypes\electron-react-redux-boilerplate
babel app/ --copy-files --out-dir build "--source-maps" "true" "--watch" "--skip-initial-build"

events.js:167
throw er; // Unhandled 'error' event
^

Error: spawn electron ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:229:19)
at onErrorNT (internal/child_process.js:406:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:235:12)
at onErrorNT (internal/child_process.js:406:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] private:serve: babel-node scripts/serve.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] private:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Hello,
I see that redux is used for all electron-react boilerplates. I like your boilerplate a lot since it is very small, so I wonder... can I pull out redux and use react-flux and the conventional routes? That would make the boilerplate even smaller and easier to understand (no container-components siblings required).
Is such approach possible or does electron require redux?
Thanks for the awesome work,
Steffen

git clone --depth=1 [email protected]:jschr/electron-react-redux-boilerplate.git
Cloning into 'electron-react-redux-boilerplate'...
The authenticity of host 'github.com (140.82.114.4)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? y
Please type 'yes' or 'no': yes
Warning: Permanently added 'github.com,140.82.114.4' (RSA) to the list of known hosts.
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Hi, is there any chance that you will create a packager for raspberry pi?
running npm run develop starts the app easy on raspberry pi but building it is impossible.

It seems like the only thing we might be missing when compared to electron-forge is native module rebuilding.

Electron forge uses electron-rebuild for this so this may be something to include with the boilerplate.

Keeping as discussion for now because I haven't needed to use a native module yet.

@pronebird in your project, are you handling native modules somehow?

Hi,

I'm using ArchLinux and I'm making an electron build for windows platform. I'm using npm run pack:win and in my electron-builder.yml

win:
  target: nsis
  icon: build/icon.ico
  arch:
    - x64
    - ia32

And when the command runs I see output

...
Using electron-builder.yml configuration file
Skip app dependencies rebuild because platform is different
Packaging for win32 x64 using electron 1.7.6 to dist/win-unpacked
Building NSIS installer
  Packaging NSIS installer for arch x64

The execution stops at "Packaging NSIS installer for arch x64" never goes past that, I've also (desperately) tried - win32 and only - ia32 in the arch field but it doesn't build for win32.

My objective is to make either a 32bit build & a 64 bit build or a 32bit build that will also run on 64 bit machines (fall back).

I need 32 bit to work since my program will run in relatively most normal computers and most of them have 32 bit windows 7.

To avoid a long block of packages here is an image of my package.json "dependencies".

Still looks long, but images aren't that bad

Thanks.

Thanks for this great boilerplate project. I am trying to use Semantic-UI with it, but am having problems.

Semantic-UI consists of the semantic-ui-react package (containing components) and the Semantic-UI CSS, which you need to load separately. The components are working fine, but I cannot get the CSS to load.

Here's what I've tried:

• adding <link rel="stylesheet" ...> to index.html; this just causes the page to go blank; the CSS loads successfully but the app does not load
• import 'semantic-ui-css' in app.js; this gives me jQuery is not defined, as it needs jQuery
• add the below into app.js; this avoids all errors but the CSS still does not get loaded into the page (i.e. my components appear but unstyled)

const jQuery = require('jquery');
document.jQuery = jQuery;
window.jQuery = jQuery;
require('semantic-ui-css');

There are no other errors that appear in the devtools console, and I'm a little stuck. Are you able to help me debug this? The alternative is to bring Webpack in and see if that helps; I'm resisting this as the app is meant to be lightweight and low-complexity.

Could someone please help with instructions to include tailwind in this boilerplate.

Is there a license file?

Hi all,
When setting nodeIntergration : false, the app won't run.
I'm guessing that's because of how gulp transpiles the jsx:

var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _reactRedux = require("react-redux");
...

And 'requiring' is not supported in the renderer without node integration.
I'd like to follow the electron recommendation and stick to the default setting.
Please advise.
Thanks!

Hi guys,

I'm trying to port a react app to electron using your awesome boilerplate. I'm getting stuck in the calls to the server. In the react app I'm using a proxy in the package.json for some routes:

"proxy": {   
    "/auth/linkedin": {
      "target": "http://localhost:5000"
    },
    "/v1/*": {
      "target": "http://localhost:5000"
    }
  }

Then, in my actions, I use the axios package for the callings. In electron, after running the building process those routes turn into absolute paths ignoring the proxy. The question:

TLDR: Is it possible to specify a proxy for some routes?

greetings

Hi, I cloned this repo and when I try to pack it, I get this error:

Error: ENOENT: no such file or directory, open '[..]\electron-react-redux-boilerplate\cache\package.json'

Node Version: v6.9.3
Windows 7

thanks for your support :)

Can it import css in react component js file? It seems error

Develop branch contains a number of improvements that we may decide to merge:

1. Added eslint script: npm run lint
2. Removed airbnb config for eslint which has unmet peer dependencies (therefore broken). Currently using recommended eslint config + react config
3. Added inline source maps support (breakpoints work in dev tools yay!)
4. Moved store configuration into store/default
5. Added redux-thunk
6. Refactoring

Hi,

It's been a while since we touched the babel configuration and quite a few things changed which I'd like to address at some point:

1. preset-env is now preferred over using specific ES presets, for instance:

{
      "presets": [
        ["env", {
          "targets": { "electron": "2.0" },
          "useBuiltIns": true
        }], "react"
      ],
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread" // needed for babel 6 only, remove after upgrading to babel 7
      ]
}

This results in a way better JS output, since Node 8.9 and onwards support async+await, spreads, destructuring and many other things that we still polyfill.

2. .eslintrc needs to have correct env set and since eslint configs can cascade, it's possible to set the env for tests and for app code separately, i.e:

• <root>/test/.eslintrc:

{
  "env": {
    "mocha": true
  }
}

• <root>/.eslintrc:

{
   // what we already have there...

  "env": {
    "es6": true,
    "node": true,
    "browser": true
  }
}

3. Specify the target version of React used in the project using pragma option. This helps ESLint to turn on the correct deprecation notices when analyzing the code. Without this option it's possible to receive deprecation notices that address some changes, for instance, in React 16.3 while using React 16.2.

{
  // what we already have..

  "settings": {
    "react": {
      "pragma": "React",
      "version": "16.2"
    }
  }
}

hi how i can add webpack for css sass support ?

npm version
{ 'electron-react-redux-boilerplate': '0.0.0',
npm: '6.4.1',
ares: '1.10.1-DEV',
cldr: '31.0.1',
http_parser: '2.7.0',
icu: '59.1',
modules: '57',
nghttp2: '1.25.0',
node: '8.9.4',
openssl: '1.0.2n',
tz: '2017b',
unicode: '9.0',
uv: '1.15.0',
v8: '6.1.534.50',
zlib: '1.2.11' }
MacBook-Pro:electron-react-redux-boilerplate jiang$ npm run develop

[email protected] develop /Users/jiang/Desktop/project/electron-react-redux-boilerplate
npm run private:compile -- --source-maps true && run-p -r private:watch private:serve

[email protected] private:compile /Users/jiang/Desktop/project/electron-react-redux-boilerplate
babel app/ --copy-files --out-dir build "--source-maps" "true"

app/main/index.js -> build/main/index.js
app/renderer/actions/user.js -> build/renderer/actions/user.js
app/renderer/app.js -> build/renderer/app.js
app/renderer/components/LoggedIn.js -> build/renderer/components/LoggedIn.js
app/renderer/components/Login.js -> build/renderer/components/Login.js
app/renderer/containers/LoggedInPage.js -> build/renderer/containers/LoggedInPage.js
app/renderer/containers/LoginPage.js -> build/renderer/containers/LoginPage.js
app/renderer/reducers/user.js -> build/renderer/reducers/user.js
app/renderer/routes.js -> build/renderer/routes.js
app/renderer/store.js -> build/renderer/store.js

[email protected] private:watch /Users/jiang/Desktop/project/electron-react-redux-boilerplate
npm run private:compile -- --source-maps true --watch --skip-initial-build

[email protected] private:serve /Users/jiang/Desktop/project/electron-react-redux-boilerplate
babel-node scripts/serve.js

[email protected] private:compile /Users/jiang/Desktop/project/electron-react-redux-boilerplate
babel app/ --copy-files --out-dir build "--source-maps" "true" "--watch" "--skip-initial-build"

[4110:0914/115044.670872:WARNING:backend_impl.cc(1789)] Destroying invalid entry.

Babel 7 is out so we should catch up. 😄

https://babeljs.io/blog/2018/08/27/7.0.0

Hello,

Thanks for this awesome boilerplate!

It works all fine, but I needed to upgrade to [email protected] & react-router-redux@next it ... works except, when I navigate inside a <Route> component (On the app side) then trigger a change on my code (Say, update some header text) Nothing gets rendered.

It's not like the BrowserSync doen't pick up the changes because the whole HTML tree gets wipedout and it's like <html><body></body></html>. No <script>s, no <div id="app"></div>.

Here is my project app folder with the branch I made those changes. Please take a look at (store.js, routes.js, app.js) as those are the folders I made changes to reflect my direction.

Update.

I think this is a problem with react-router not really sure, cause here.

export default () => {
    return (
        <Router>
            <App>
                <Switch>
                    <Route path="/login" component={Login} />
                    <Route path="/loggedin" component={LoggedIn} />
                    <Route path="/" component={MainPage} />
                </Switch>
            </App>
        </Router>
    )
}

That is my <Routes /> component that I'm rendering on the main app.js file.

When I edit whatever component and my app (clinet / UI side) is on route / aka MainPage I get easy reload and everything works!

However if (on the client UI side) I navigate to say, LoggedIn page and update something on code that mentioned issue (nothing renders) gets triggered.

Thanks.

Dear Jschr,

Great boilerplate, there are two minor issues:

• the github link could be adopted: "https://github.com/jschr/electron-react-redux-boilerplate.git" instead of "[email protected]:jschr/electron-react-redux-boilerplate.git" which was for your account
• since one cannot build dmg from linux (?and windows?), it would be good to allow two build rules in electron-builder.yml: for me the following works fine:
  mac:
  target: tar.gz
  category: public.app-category.tools

Thanks,
Steffen