Reactrolysis

A opinionated project structure to get started developing with electron-webpack, typescript & react.

This template comes packed:

• Use of webpack-dev-server for development
• HMR for both renderer and main processes
• Use of babel-preset-env that is automatically configured based on your electron version
• Use of electron-builder to package and build a distributable electron application
• electron-window-state to manage window location
• React Devtools integration with electron-devtools-installer
• redux as the ultimate source of truth
• electron-redux integrating both main and renderer processes
• redux-persist with electron-store to use
• typesafe-actions to avoid redux boilerplate
• material-ui as the component library of choice as the material design spec is very malleable
• storybook to develop components in isolation and much much more
• Vscode debugging integration
• Github CI integration, which runs on push

Make sure to check out all the docs:

• react for UI
• electron docs for all kinds of features
• electron-webpack's documentation for build pipeline

Getting Started

Simply clone down this repository, install dependencies, and get started on your application.

The use of the yarn package manager is strongly recommended, as opposed to using npm.

# copy template using git clone
git clone https://github.com/wallexd/reactrolysis.git
cd simple-electron-webpack-starterkit
rm -rf .git

# install dependencies
yarn

Development Scripts

# run application in development mode
yarn dev

# compile source code and create webpack output
yarn compile

# `yarn compile` & create build with electron-builder
yarn dist

# `yarn compile` & create unpacked build with electron-builder
yarn dist:dir

Project structure

• @main: maps to src/modules - all the code runs in the main process. Entry for the main process is src/main/index.ts
• @renderer: maps to src/renderer - all the code runs in the renderer process. Entry for the main process is src/renderer/index.tsx
• @common: maps to src/common - code that runs in both renderer & main process like redux store
• @modules: maps to src/modules - to be used for modularly separating the features from app code. Features will contain reducers, action as well as associated components & tests

ToDo

• [x] Add redux-observables to handle side effects
• [ ] Settings page
  • [ ] with option to toggle theme handling between auto & user
  • [x] Cleaner way to handle storybook window creation
• [ ] Add tests for reducers
• [ ] Add tests for epics