Modern and somewhat opinionated react+electron+webpack boilerplate

License: MIT License

JavaScript 99.22% CSS 0.78%

electron react webpack2 nodejs javascript

enhanced-electron-react-boilerplate's Introduction

Modern and Minimal Electron + React Starter Kit

Electron, React, Webpack -- Modern and up-to-date, with a handful of quality of life features included

I made this starter kit as most boilerplates were either out-of-date, heavy handed, or enforced a structure on me that I just didn't like. This project utilizes Redux and uses the "ducks" proposal as the basis for the layout and structure of the application views. CSS files are treated as globals, with any less files being compiled as a css module. The goal is to provide a ready to use, easy to adopt boilerplate and starter kit to get rolling with a modern environment, without too much of a "personal" twist on things.

Production builds babel-minify is used, and ES2015/ES6 transpilation is provided -- As modern node and chromium versions support 99%+ of the ES6 feature set, I feel those steps are unnecessary.

If you like this project (or think its too heavy handed and want something more minimal), check out basic-electron-react-boilerplate which is a cut down version of this project without any decisions made on what you should be using or how to structure your application. Its the bare minimum to get up and running with electron+react+webpack.

Main features

Latest React, Redux, and Webpack 3
Uses ES6 natively without babel transpilation thanks to modern Electron environments
Minified with babel-minify
Uses react-router-dom (React Router v4) with connected-react-router to sync with Redux (uni-directional, use react-router directly)
LessCSS (easily swapped to Sass if that's more to your liking) using CSS Modules
Provides a basic component/view structure based on Redux "ducks" proposals, with an included utility helper to make writing your 'views' easier and understandable, with the advantage of minimizing the amount of required files and directory switching
Embeds PhotonKit for a very basic head start on layouts and styling. Its lightweight and easy to rip out or build on top of.
You however are encouraged to adapt this as much as you like. If you find you want to rip out too much, bake sure you try basic-electron-react-boilerplate instead.

To get started:

Run npm install

Development

Run npm run dev to start webpack-dev-server. Electron will launch automatically after compilation.

Production

You have two options, an automatic build or two manual steps

One Shot

Run npm run package to have webpack compile your application into dist/bundle.js and dist/index.html, and then an electron-packager run will be triggered for the current platform/arch, outputting to builds/

Manual

Recommendation: Update the "postpackage" script call in package.json to specify parameters as you choose and use the npm run package command instead of running these steps manually

Run npm run build to have webpack compile and output your bundle to dist/bundle.js
Then you can call electron-packager directly with any commands you choose

If you want to test the production build (In case you think Babili might be breaking something) after running npm run build you can then call npm run prod. This will cause electron to load off of the dist/ build instead of looking for the webpack-dev-server instance. Electron will launch automatically after compilation.

Scaffold Utility

This project comes with a basic scaffold utility (built on inquirer) to quickly add new components to the application. It lets you create both stateful and stateless components, and you also have the option of spinning up Redux boilerplate to integrate them initially to the redux store with a dummy action that you should swap out immediately. Its written in pure node fs calls to be cross platform.

Run npm run scaffold
Fill out the prompts
Profit! You can always edit the scripts yourself to tweak the templates if you don't like it out of the box

enhanced-electron-react-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

wilomgfx marcionicolau abeck70 deserted dannkkie digitaldangal nurpax firepo johnnyhawk02 mudasirqazi00 nikola-wd sss-software alexrogalskiy hunghoxuan

enhanced-electron-react-boilerplate's Issues

npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify

Hello,

Thanks for you work.

I tried today to test your projet, I got this warning

npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify

I have done a npm ls to find out which dependancies use it :

`-- [email protected]
  `-- [email protected]

PS: If you want to check out another dev dependancies , I use https://david-dm.org/pbarbiero/enhanced-electron-react-boilerplate?type=dev

Webpack loader config for bootstrap and possibly other loaders

In the file: webpack.dev.config.js

Compiled bootstrap from the node module 'bootstrap' didn't work until I made this change.

The CSS loader change from

{ test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], include: defaultInclude },

{ test: /\.css$/, loader:[ 'style-loader', 'css-loader' ] },

Spawn `electron .` automatically in the "dev" script?

Hi,

Is there a reason why you separate the dev commands into two commands to be run in separate consoles?

Another approach would be to spawn a separate electron process in webpack.dev.config.js. Borrowing heavily from electron-react-boilerplate, I was able to do the following:

In webpack.dev.config.js, I required child_process.spawn:

const { spawn } = require('child_process');

In the devServer section, I added:

setup() {
      spawn(
        'npm',
        ['run', 'testDev'],
        { shell: true, env: process.env, stdio: 'inherit' }
      )
      .on('close', code => process.exit(0))
      .on('error', spawnError => console.error(spawnError));
}

See:
https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.renderer.dev.js

Is there a disadvantage to doing this? If it does make sense to do this, can I submit a pull request?

This project (and the basic-) version are great BTW. A much needed update to something like electron-react-boilerplate. THANKS!

ERROR in unknown: Invalid number - npm run package

Thank for great boilerpalte!!

At some point I was not able to create package and I'm getting the next error:

                         Asset       Size  Chunks                    Chunk Names
 font/photon-entypo__10lnA.eot    48.6 kB          [emitted]         
font/photon-entypo__i1XI6.woff    30.7 kB          [emitted]         
 font/photon-entypo__BJxdK.ttf    48.5 kB          [emitted]         
                     bundle.js    2.51 MB       0  [emitted]  [big]  main
                    bundle.css    40.9 kB       0  [emitted]         main
                    index.html  227 bytes          [emitted]         

ERROR in unknown: Invalid number (70027:15)

When checking the bundle.js at this line the code there is:


function mkdirP (p, opts, f, made) {
   ... 
    if (mode === undefined) {
        mode = 0777 & (~process.umask()); // the issue is with the octal 0777 that should be 0o777
    }
   ....
}

Any idea how to fix it?

HMR nuking the store?

what is the point of hot reload if ones state is being killed on every change?

...or have I messed something up?

Error in loading images

Hi,
Thank you for providing such a boilerplate. I have been using this boiler plate to build my electron application. I added an image folder inside src/assets and imported images from the same inside react component. The images I import is loaded during development mode but not inside production mode.
I searched on the Internet and some one has written to add url-loaders instead of file-loader in webpack build configuration. I did the same and it worked is this a correct solution or else what are my options

Example page does not show persisted config

Hi again. The config file definitely gets updated on save, but the config object is empty upon reload. It looks like the app.on('ready') function that initializes it in electron-json-config is never getting called. Any idea why?

I suppose this could be a bug in electron-json-config??

Packaged app just displays empty window

Hi, trying to use your cool boilerplate. Works great in dev, but having probs with packaged app. Using Node 8.8.0/NPM 5.4.2 (OS X) and a clean clone of your repo, the built app just displays an empty window :(

Can't build at all with earlier versions (npm prune --production fails).

Pls advise...

how to change title and title icon?

looking at this starter kit i don't see an index.html file. How do i change the title and icon of the app? where is the index.html file?

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