- Electron
- React
- Redux
- Webpack
- ForrestJS hooks
- Sequelize
- SQLite
- React-styleguidist for developing React components in isolation.
- React & Redux devtools.
- Electron Builder for deployment.
- Run
npm install - Open a second terminal, run
npm run watchto boot Webpack compiler. - Run
npm run startto boot Electron app in development.
- Open a second terminal, run
npm run watch-styleto boot Webpack compiler. - Run
npm run styleguideto boot react-styleguide.
- Run
npm run buildto prepare the app for production. - Then run the command corresponding to your OS:
- Windows:
npm run make:win - Linux:
npm run make:linux - macOS:
npm run make:macos
Runs the app in the development mode.
Make sure to run the app along with a second terminal running npm run watch command (Webpack)
Webpack command for dev environment, targets electron-renderer
Runs the React styleguide server.
Make sure to run the styleguide along with a second terminal running npm run watch-style command (Webpack)
Note: Currently styleguide does not support hot-reloading in this non-CRA setup.
It needs a better config on Webpack. For now, it still works without hot-reload.
Webpack command for react-styleguide environment, targets web
Packs the app for Windows environment.
You will find the package installer file inside dist folder: yourAppName Setup 1.0.0.exe
Packs the app for Linux environment.
Packs the app for macOS environment.
├── assets # contains app icon files
├── server # contains back-end related code: IPC handler, Sequelize, SQLite
│ ├── features # contains back-end business logic per functionality (routes)
│ ├── lib # contains utility functions used in back-end
│ ├── services # contains back-end operation logic (handling IPC, SQLite, etc.)
│ ├── boot.js # main file for back-end orchestration using ForrestJS hooks
├── src/js # contains front-end related code: React & Redux
│ ├── components # contains common React components used overall the front-end
│ ├── features # contains feature based Redux only logic
│ ├── lib # contains utility functions used in front-end
│ ├── pages # contains container and components for each page
│ ├── resources # contains resource files (images, json files, etc.)
│ ├── App.js # React App.js
│ ├── app.reducer.js # main reducer file that puts all reducers together (no need to modify)
│ ├── app.state.js # main redux state file - import your features here to initialize them.
│ ├── index.js # top level orchestration file for React & Redux
│ ├── styleguide.config.js # import your styleguide components here to work on isolation
├── index.html # Electron renderer thread entry point
├── main.js # main file for Electron main thread orchestration
├── preload.js # preload script exposes the parts needed for renderer from main thread
├── webpack.common.js # webpack config for development environment
├── webpack.prod.js # webpack config for production environment
└── webpack.styleguide.js # webpack config for running react-styleguide