Minimal and modern react+electron+webpack boilerplate

License: MIT License

JavaScript 99.21% CSS 0.79%

electron javascript nodejs react webpack2

basic-electron-react-boilerplate's People

Contributors

Stargazers

Watchers

basic-electron-react-boilerplate's Issues

doesnt electron-packager support --platform=win32 --arch=x86?

i want to packager for win32 x86, but it doesnt work,
Error: Unsupported arch=x86

After 'npm install' and 'npm run dev', should the react dev tools load in the inspector?

Hello,
I've forked and completed an 'npm install' and 'npm run dev'. Now the electron app pops up, but there's no React dev tool in the inspector. Is this correct? I have a feeling that the server is not running.

Thanks,
Tim

Module build failed: SyntaxError: Unexpected token

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (11:16)

9 |
10 | // Now we can render our application into it

11 | ReactDom.render(, document.getElementById('root'));
| ^
12 |

Packe and Postpackage doesn't work - CANNOT RUN WITH NODE 10.4.1

Hi,

Finally I want to release my first version of the app. But I can't.

I get the error:

CANNOT RUN WITH NODE 10.4.1
Electron Packager requires Node 4.0 or above.

When I'm trying to run npm run packe or npm run postpackage

I have Node v10.4.1

What am I doing wrong?

Please provide support for ipcRenderer in renderer process (React component)

Hello!

I am working on an app that requires a persistent access token between uses. I want to store this token in the main process (Electron) so that it can be retrieved by the renderer process (React) whenever needed.

However, when I include const {ipcRenderer} = require('electron') at the top of my App.js component, Electron fails to compile with the error Module not found: Error: Can't resolve 'fs' in '/Users/nheller/Projects/training-tracker/node_modules/electron'

Executing npm install --save fs installs fs as expected, but the error remains unchanged.

Does this boilerplate support ipcMain and ipcRenderer? If so, how do I go about facilitating communication between the main and renderer processes?

First install creates a new lockfile

Cloning and then installing changes the package-lock.json, which is kind of a weird start.

package does not respect BrowserWindow settings

When I am running the dev build, or using npm run prod my window renders as expected.

These are my settings in main.js:

  mainWindow = new BrowserWindow({
    width: 600, height: 1000, show: false, 
    titleBarStyle: 'hiddenInset',
    webPreferences: {
      nodeIntegration: true,
    }
  });

But when I run npm run package the resulting .app when opened has the normal borders and title.

'npm run build' and 'npm run package' not working; ERROR in unknown: Invalid number (31727:15)

Hi Phillip, I really like your basic electron-react boilerplate, it's been working great for me in development. 'npm run dev' works fine for me, but I am getting the following error when trying to build for production:

npm run package

> [email protected] package C:\Users\Steven\Dev\reader\erb-basic
> webpack --config webpack.build.config.js

Hash: 82c0f55fc43edc9c11f2
Version: webpack 3.6.0
Time: 4432ms
     Asset       Size  Chunks                    Chunk Names
 bundle.js    2.21 MB       0  [emitted]  [big]  main
bundle.css  371 bytes       0  [emitted]         main
index.html  227 bytes          [emitted]

ERROR in unknown: Invalid number (30327:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] package: `webpack --config webpack.build.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] package script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Steven\AppData\Roaming\npm-cache\_logs\2017-12-22T05_47_19_204Z-debug.log

debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\dev\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Steven\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'package' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prepackage', 'package', 'postpackage' ]
5 info lifecycle [email protected]~prepackage: [email protected]
6 info lifecycle [email protected]~package: [email protected]
7 verbose lifecycle [email protected]~package: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~package: PATH: C:\Users\Steven\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Steven\Dev\reader\erb-basic\node_modules\.bin;C:\Users\Steven\bin;C:\dev\git\mingw64\bin;C:\dev\git\usr\local\bin;C:\dev\git\usr\bin;C:\dev\git\usr\bin;C:\dev\git\cmd;C:\Program Files\Docker\Docker\Resources\bin;C:\Dev\Python36\Scripts;C:\Dev\Python36;C:\Perl64\site\bin;C:\Perl64\bin;C:\dev\python\Scripts;C:\dev\python;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Calibre2;C:\Program Files (x86)\Calibre2;C:\Program Files (x86)\Plantronics\Spokes3G;C:\dev\git\cmd;C:\Program Files (x86)\Vagrant\bin;C:\Program Files (x86)\Pandoc;C:\Program Files (x86)\QuickTime\QTSystem;C:\Dev\Git\cmd;C:\dev\yarn\bin;C:\dev\nodejs;C:\dev\railsinstaller\Ruby2.3.3\bin;C:\ProgramData\RailsInstaller\Git\cmd;C:\ProgramData\RailsInstaller\Ruby2.3.0\bin;C:\Users\Steven\AppData\Local\atom\bin;C:\Users\Steven\AppData\Local\Microsoft\WindowsApps;C:\Dev\Git\bin\git.exe;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\Kalabox\bin;C:\Program Files\Lando\bin;C:\Program Files\wkhtmltopdf\bin;C:\Program Files\KindleGen;C:\Program Files\7-Zip;C:\Program Files\AutoHotkey;C:\Users\Steven\AppData\Local\GitHubDesktop\bin;C:\Users\Steven\AppData\Local\Yarn\bin;C:\Users\Steven\AppData\Local\inkdrop\bin;C:\Users\Steven\AppData\Roaming\npm;C:\dev\git\usr\bin\vendor_perl;C:\dev\git\usr\bin\core_perl
9 verbose lifecycle [email protected]~package: CWD: C:\Users\Steven\Dev\reader\erb-basic
10 silly lifecycle [email protected]~package: Args: [ '/d /s /c', 'webpack --config webpack.build.config.js' ]
11 silly lifecycle [email protected]~package: Returned: code: 2  signal: null
12 info lifecycle [email protected]~package: Failed to exec package script
13 verbose stack Error: [email protected] package: `webpack --config webpack.build.config.js`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Steven\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Steven\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Steven\Dev\reader\erb-basic
16 verbose Windows_NT 10.0.15063
17 verbose argv "C:\\dev\\nodejs\\node.exe" "C:\\Users\\Steven\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "package"
18 verbose node v8.9.1
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] package: `webpack --config webpack.build.config.js`
22 error Exit status 2
23 error Failed at the [email protected] package script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

My only alteration to the webpack config files is the following, which I had to include to get electron-store to work:

module.exports = {
  ...
  externals: [{ 'electron-store': 'require("electron-store")' }],
  ...
};

I've searched google for answers and tried a bunch of things, but nothing has worked. This seems like a similar problem, but none of the solutions worked for me.

Any idea what may be the problem? The only thing I can think of doing next is removing electron-store from my code and using a different module for local json storage, but I'm reluctant to refactor my code for a different module because electron-store works well and I'm not even sure it's the problem here.

Thanks!

Build shows empty screen

everything was fine , and i managed to generate the build also.
But the problem is , if i directly run the application ,it shows empty screen
but when i run "npm run dev" command in command window and then if i start the same application ,i get the desired output.
what i want is , application should run without typing "npm run command " in command window as it is not user friendly method. it should just start by clicking on application icon.
please answer fast

HMR not wokring.

Try change anything in App.js file. It will show a warning in console (in electron window).

// dev-server.js:34 [HMR] Error: Aborted because 140 is not accepted
// Update propagation: 140 -> 139 -> 134 -> 307
// at hotApply (http://localhost:8080/bundle.js:430:30)
// at hotUpdateDownloaded (http://localhost:8080/bundle.js:283:13)
// at hotAddUpdateChunk (http://localhost:8080/bundle.js:263:13)
// at webpackHotUpdateCallback (http://localhost:8080/bundle.js:8:12)
// at http://localhost:8080/0.1d5e6bcfd13ee4889dc2.hot-update.js:1:1
// (anonymous) @ dev-server.js:34

Build not working

Hi after I run
npm run package
It completed building but after I start electron from builds/ it opens an empty electron...
If I pull index.html page in it than the app works.

Is something wrong with packager or I am not using it right?

Thank you

Thank you for making this. Other examples were old, out of date, or just plain didn't work. This solved a problem I've been experiencing for over a week with building for production. Appreciate this a ton!

using scss

I have a trouble using scss, I downloaded node-sass but i can't import the scss files

Change title

Hey.

How can i change the title of the application ?

It shows 'Webpack' in the electron window title.

Hope you reply soon.

Thanks

Where does index.html come from?

Forgive my ignorance but I'm trying to reverse this boilerplate to better understand what's going on.

Where does index.html come from?

I'm not new to React but am pretty new to Electron, so maybe there's some magic I'm not aware of?

How to use with electron-builder?

I'm trying to use this boilerplate with electron-builder but it throws this error on start:

Uncaught Exception:
ReferenceError: document is not defined
    at Object.<anonymous> (/project/path/dist/mac/My App.app/Contents/Resources/app.asar/dist/index.js:18:25595)
    at o (/project/path/dist/mac/My App.app/Contents/Resources/app.asar/dist/index.js:1:336)
    at p (/project/path/dist/mac/My App.app/Contents/Resources/app.asar/dist/index.js:1:724)
    at Object.<anonymous> (/project/path/dist/mac/My App.app/Contents/Resources/app.asar/dist/index.js:1:735)
    at Object.<anonymous> (/project/path/dist/mac/My App.app/Contents/Resources/app.asar/dist/index.js:19:3)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)

npm run package shows empty screen

Hello,

after runing npm run build , a dist folder is created and contains files like bundle.js, bundle.css and index.html

But then, if I'm runing npm run prod I see only a blank screen. This happens because the generated index.html is empty:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="./bundle.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="./bundle.js"></script></body>
</html>

I believe the cause is index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

// Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it
let root = document.createElement('div');
root.id = "root";
document.body.appendChild( root );

// Now we can render our application into it
render( <App />, document.getElementById('root') );

So we need a something like template (index.html) ? Or how can I fix the issue?

P.S. The same issue if I'm using npm run package

Regards
dit

ASAR compile ?

Loal files are not loaded

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.

Please help me,Thanks

Cannot load synchronize/node-fibers

When I try to load node-fibers, it throws:

Uncaught Error: Module parse failed: D:\Projects\C#\LegacyManagerBoilerplate2\node_modules\fibers\fibers.js 'return' outside of function (2:1)
You may need an appropriate loader to handle this file type.
| if (process.fiberLib) {
| return module.exports = process.fiberLib;
| }
| var fs = require('fs'), path = require('path');
at Object. (bundle.js:59785)
at webpack_require (bundle.js:660)
at fn (bundle.js:86)
at Object. (bundle.js:13715)
at webpack_require (bundle.js:660)
at fn (bundle.js:86)
at Object. (bundle.js:30213)
at webpack_require (bundle.js:660)
at fn (bundle.js:86)
at Object.exports.__esModule (bundle.js:54167)

I have tried a lot, but I nothing seems to work. Do you have any ideas on why this doesn't work?

pbarbiero / basic-electron-react-boilerplate Goto Github PK

basic-electron-react-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

basic-electron-react-boilerplate's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs