A secure, modular, and easy to use Electron Forge boilerplate featuring Typescript, React, Webpack, Playwright, Redux and persistance (with redux-persist support) plus prettier :))))))))))))))))
Clone the repository locally with none of its git history
$ git clone --depth 1 --single-branch https://github.com/Arts-Engineering-Composite/electron-typescript-react-playwright-redux your-project-name
$ cd your-project-name
$ yarn
Generate a GitHub repository with the Use this template button above
$ git clone https://github.com/your-username/your-project-name
$ cd your-project-name
$ yarn
Start the app in the dev
environment:
yarn start
To package apps into a local executable:
- Personalize the forge maker configs at
/.config/forge.config.js
yarn make:win
# yarn make:mac
# yarn make:linux
- Copy the contents of
env.example
to.env
(Copy into a blank one if you dont already have one) - Set your
GH_TOKEN
- Personalize the forge publisher configs at
/.config/forge.config.js
yarn publish:win
# yarn publish:mac
# yarn publish:linux
- Ensure that you have a high quality
source.png
icon in your/assets/package
folder - Run:
yarn create-icons
- Check your new icons in
/assets/package/icons
- /.config
... # development config files
- /assets
- /package # static assets for packaging (ex. installer logo)
- /icons # icons for all platforms you wish to package for
- source.png # the source image for all package icons
# used to auto-generate all platform icons
... # extra assets (ex. installer loading gif)
- /icons # icons for your backend/frontend
- /fonts # fonts for your frontend
... # add on as u go (ex. /wallpapers)
- /src
- /bridges
index.ts # main contextBridges
... # add on bridges in other files or include them in index.ts
# make sure to import any new bridge files in the preload
- /app # backend code
- /ipc # ipcRenderer -> ipcMain listeners
- main.ts # main functionality ipc listeners
# ex. quit/hide
... # add on as u go
# make sure to add imports to new ipc files
# in the main electron entry
- /render # frontend code
- /containters # Containers per routes
- /HomePage # HomePage containters + tests
- /components # Components
- /redux # Everything redux
- Routes.tsx # react-router routes
- App.tsx # Export entire app with routes components
# and redux provider if you are using it
-
main.ts # main "backend" electron entry
renderer.ts # main "frontend" electron renderer entry
preload.ts # main "entry to frontend" electron preload entry
testHelper.ts # helper functions for running playwright tests
When contributing to this repository, please first discuss the change you wish to make via an issue.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (yarn commit)
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request and leave some comments!
Error: ChromeDriver did not start within 5000ms
: See this thread export {no_proxy,NO_PROXY}="127.0.0.1"