tahnik/electron-react

A simple and compact boilerplate for electron and react (redux, router)

ElectronJS + ReactJS boilerplate

A simple and clean boilerplate for Electron and react. It includes:

• State management with Redux
• Routing with React-Router v4
• React and Redux devtools for debugging
• .eslint for ESlint
• Webpack 3 for bundling
• Babel for compiling

Usage

NodeJS v8.3.0

• Clone the repo git clone https://github.com/tahnik/electron-react.git
• Edit the package.json to change the name to your project name and description to your project description. Change the author as well.
• Run npm i
• Then run the project as described in the section below

How to

• To run in development mode with hot reloading, open a terminal inside your project and run

  npm run dev

  This commands creates a webpack dev server which will watch and reload the bundle as you edit and will it available at https://localhost:8080. The command will also run the electron app in development mode. So it will open up devtools with React and Redux devtools initialized.

• To build the app and test if it is working:

  npm start

  This command will compile the app in production mode and start the app. Here is you still toggle the developer tools from the menu and see if there is any errors

• To package the app and create a distributable:

  npm run dist

  This will create a relevant distributable file. For example, if you are on Windows, it will create a .exe file in the release folder.

Contribute

Awesome! Create a new issue or do a pull request.

electron-react's Issues

Error in: npm run dev

page is blank and in console:

app.bundle.js Failed to load resource: net::ERR_CONNECTION_REFUSED
webpack-dev-server.js Failed to load resource: net::ERR_CONNECTION_REFUSED

I've just cloned and runned npm install.

Generate installer

Hi,

I start using generator and I would like generate an installer. Do you now how I can do with this project stucture ?

Best regards

.babelrc file

I just used the repo to get a foundation thru git clone. I had some issues with babel and then realized the dotfile for babel doesn't exist here. Once I added that everything worked as your directions stated but might be good to add that in README.

{ "presets": ["es2015"] }

Running production and creating distribution files fails

Just cloned the repository and got the app running in debug mode, but production mode and creation of distribution files are failing.

 electron-react git:(master) ✗ npm run dist

> [email protected] dist /Users/vboctor/js/electron-react
> npm run prod && electron-builder


> [email protected] prod /Users/vboctor/js/electron-react
> cross-env NODE_ENV=production webpack --progress --color --config webpack/prod.config.js

 92% chunk asset optimization/Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
        ^

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (/Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/Users/vboctor/js/electron-react/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/Users/vboctor/js/electron-react/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/Users/vboctor/js/electron-react/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/Users/vboctor/js/electron-react/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/Users/vboctor/js/electron-react/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (native)
    at /Users/vboctor/js/electron-react/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (native)
    at Compilation.<anonymous> (/Users/vboctor/js/electron-react/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/vboctor/js/electron-react/node_modules/webpack/lib/Compilation.js:670:11)
    at next (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/Users/vboctor/js/electron-react/node_modules/webpack/lib/ProgressPlugin.js:119:6)
    at next (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.<anonymous> (/Users/vboctor/js/electron-react/node_modules/babel-minify-webpack-plugin/dist/index.js:119:11)
    at Compilation.applyPluginsAsyncSeries (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/Users/vboctor/js/electron-react/node_modules/webpack/lib/Compilation.js:666:10)
    at next (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin.callback (/Users/vboctor/js/electron-react/node_modules/webpack/lib/ProgressPlugin.js:115:6)
    at next (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.<anonymous> (/Users/vboctor/js/electron-react/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/Users/vboctor/js/electron-react/node_modules/webpack/lib/Compilation.js:662:9)
    at next (/Users/vboctor/js/electron-react/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/Users/vboctor/js/electron-react/node_modules/webpack/lib/ProgressPlugin.js:111:6)

npm ERR! Darwin 17.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "prod"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prod: `cross-env NODE_ENV=production webpack --progress --color --config webpack/prod.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prod script 'cross-env NODE_ENV=production webpack --progress --color --config webpack/prod.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron-react-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production webpack --progress --color --config webpack/prod.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs electron-react-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls electron-react-test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/vboctor/js/electron-react/npm-debug.log

npm ERR! Darwin 17.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dist"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dist: `npm run prod && electron-builder`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dist script 'npm run prod && electron-builder'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron-react-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run prod && electron-builder
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs electron-react-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls electron-react-test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/vboctor/js/electron-react/npm-debug.log