Electron starter kit with React, Redux, Webpack 4, Autoupdater and much more...
- React
- Redux
- Webpack 4 dev and production configs
- Autoupdater - checking and updating whole application when new version is available
- Local store - used to save application settings
- React + Redux devtools for debugging application
- Hot module replacement support (HMR)
- ESlint - to keep your js readable
- Code spliting - separate vendor and your app code
- Minified JS & CSS in production bundle / package
- Bundle Analyzer included (uncomment in webpack production configuration file)
- Counter examples using
Redux
state andReact component
state
1. Clone the repository to your local machine by running
git clone [email protected]:trembacz/electron-starter-kit.git
cd electron-starter-kit
2. Install all dependencies
npm install
or yarn install
3. Build dev files and start the app
npm run start
or yarn start
4. Build production files and start the app
npm run prod
or yarn prod
5. Menu configuration
Application menu can be found under global/menu.js
, you can modify it to fit your needs.
All packages are created under the dist
folder.
Before creating packages, please remember to specify repository
in the package.json
.
If you need to change packages configuration you can do that in package.json
under build
.
To create application packages you need to run one of the commands.
1. Commands
Platform | Command |
---|---|
All | npm run package-all yarn package-all |
Windows | npm run package-win yarn package-win |
Mac | npm run package-mac yarn package-mac |
Linux | npm run package-linux yarn package-linux |
2. Publishing packages
npm run publish-app
or yarn publish-app
Application have built in autoupdater. There are just two things you need to do:
- edit
dev-app-update.yml
file and fill it with your github username and repository name
owner: Github-Username
repo: Repo-Name
provider: github
- edit
main.js
and uncomment line marked below
// check for update
// updateManager.checkForUpdate(); <-- this line
Application have built in local storage, it contains width, height and position of the application, so when you restart your application, on next run it will use these settings. It can be extended by more informations if you need to save something more. StoreManager can be found in global/store.js
, just use get
and set
methods to load / save extra informations.
Store is saved as JSON
file inside the userData
folder and his default version looks like below
{"windowBounds":{"width":1112,"height":792,"x":184,"y":12,"maximized":false}}
- Tomasz Rembacz