vectordotdev/molecule

⚛️ – :atom: – :atom_symbol: Boilerplate for cross platform web/native react apps with electron.

molecule

🔥 used in production at Timber.io

⚛️ –  – ⚛️ Modern starter kit for React + Electron projects.

Features

• 👫 Builds target both web and native
• React
• ♻️ Redux
• 📘 Redux Saga
• 🔗 React Router
• 🔗 ♻️ React Router Redux
• 🔥 Hot reloading
• 💻 Webpack dashboard
• ⚡ Optimized webpack builds (DLL and CommonsChunks)
• 6️⃣ ES6/ES2015
• ➰ Yarn
• 💅 Styled Components
• 🃏 Testing with Jest
• 📁 Feature based structure
• 🔧 absolute project imports import Navigation from 'components/Navigation'

Getting Started

1. yarn
2. yarn start
3. yarn electron (different tab)

Hot reloading in action (web & native simultaneously)

TODO

• jest tests
• don't include node_modules in electron builds
• look into electron-builder for multi platform builds
• hot reloading sagas/reducers
• electron cross process communication (https://github.com/samiskin/redux-electron-store)
• provide stack examples + installation
• iterate over dev dependencies instead of using explicit vendors.js
• Deployment guides
• better build logs (https://github.com/ngryman/speedracer for insp.)
• add electron react/redux devtools

Inspiration (Major thanks to these awesome projects/contributors)

• https://github.com/mxstbr/react-boilerplate/
• https://github.com/stsiarzhanau/webpack-react-redux-starter/
• https://github.com/chentsulin/electron-react-boilerplate
• https://github.com/facebookincubator/create-react-app
• https://github.com/pbarbiero/enhanced-electron-react-boilerplate

molecule's Issues

Loading incorrect project into electron window.

Steps to reproduce:

1. Run a webpack project on port 3000.
2. In molecule run yarn dev
3. In molecule (separate terminal) run yarn electron

Results:
I do not see the counter app loaded in the electron window. Instead I see my project that I previously had running on port 3000.

Add type checking via flow

Not sure if this is a road you want to go down @zsherman (if not feel free to close), but flow is a nice type checker that can be used on a file-by-file basis. So even if molecule ships with flow in it by default, the user doesn't have to continue using flow.

If this is something we'd like to do, I can get us setup with it. I have some experience working with flow, as we use it extensively in hedron.

can't start the project

yarn electron just opens an blank window, tried npm start but doesn't work either

.babelrc file crucial to function of scripts... :(

This got me for a bit. I realized that I had copied over the boilerplate (but not hidden files), so none of my scripts worked that use babel-node so added a babel item to my package.json to follow the build system around with all of the needed presets

Ask to run on different port if one is in use

Create react app does a nice job of detecting if a port is busy and offering to run the dev server somewhere else. I'd love to do that with molecule as well.

Use postinstall script to install additional dependencies

This is just an idea I had for making dependencies a little more dynamic. We could tie into the default npm postinstall script to launch a node script powered by inquirer that asks you a series of questions about your project setup. This would work similarly to using yarn init or yarn generate (on react-boilerplate). It would also function similarly to using yarn eject from within a create-react-app project (because the inquirer script would auto-eject after postinstall runs).

we could...

• ask what styling engine you want to use: styled-components, glamorous, css-modules, inline, etc.
• ask what state manager you want to use: redux, mobx

I'm sure there's things we could add to this script, but those are the first things that came to mind (specifically the styling options, as state managers might be too complex since they'd require multiple dependencies (i.e. react-router-redux/mobx-react-router). But when selected, the script could basically run a yarn add --dev styled-components as well as inject some boilerplate styled-components styles to give the user an idea of how to implement them.

Disclaimer

I have no idea if adding dependencies via a node script is a bad idea, I can't think of any hangups that would be encountered when doing it, but that doesn't mean there aren't any. LMK your thoughts

web not working

Windows 10 user.

npm -v
6.4.0
node -v
v8.9.1

Electron compiles to but web does not. Blank page, no error in console.

I'm stuck here...

Look into Dotenv Webpack

Seems like a good solution for env vars https://github.com/mrsteele/dotenv-webpack

Add auto-updater

Molecule should feature an auto-updater. I think this is a super attractive feature that might seem daunting to new electron users. Supporting it out of the box would likely be a huge selling point.

Dev tools covers half the page until window is resized

When initially running yarn electron, the dev tools inspector covers half the page. As soon as a viewport resize event is triggered, it corrects itself. Subsequent reloads do not re-trigger this issue, it's only present on initial render.

I thought maybe it was due to [email protected], but tried rolling back to 1.4.3 and the issue is still present.

Building for web target?

Awesome work as I mentioned already! I'm wondering how you would build a production copy for the web using this boilerplate?