https://github.com/matthiaaas/clean-electron-react
Clean Electron Boilerplate including React, Typescript, Babel and Webpack
https://github.com/matthiaaas/clean-electron-react
boilerplate electron electron-react kit react starter
Last synced: 19 days ago
JSON representation
Clean Electron Boilerplate including React, Typescript, Babel and Webpack
- Host: GitHub
- URL: https://github.com/matthiaaas/clean-electron-react
- Owner: matthiaaas
- Created: 2020-10-26T16:38:15.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T20:31:04.000Z (over 2 years ago)
- Last Synced: 2024-05-29T19:22:32.591Z (almost 2 years ago)
- Topics: boilerplate, electron, electron-react, kit, react, starter
- Language: JavaScript
- Homepage:
- Size: 901 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [clean-electron-react](https://github.com/matthiaaas/clean-electron-react)
`clean-electron-react` is an Electron boilerplate including a fresh setup of [React](https://github.com/facebook/react), [Typescript](https://github.com/microsoft/typescript) [Prettier](https://github.com/prettier/prettier) and [Webpack](https://github.com/webpack/webpack) in order to provide the cleanest possible setup experience.
###### Notice: This boilerplate is still in development
## Getting Started
Clone the repository or [Use this template](https://github.com/matthiaaas/clean-electron-react/generate).
```
git clone https://github.com/matthiaaas/clean-electron-react.git YOUR-PROJECT-NAME
cd YOUR-PROJECT-NAME
yarn
```
## Development
Start the `webpack-dev-server` and listen for file changes (supports hot reloading). Then start Electron.
```
yarn build
yarn watch
yarn dev
```
You can now start building your app:
### app/[app.ts](https://github.com/matthiaaas/clean-electron-react/tree/main/app/app.ts) (electron entry)
```ts
const createWindow = () => {
const win = new BrowserWindow({
width: 820,
height: 532,
frame: false,
titleBarStyle: "hiddenInset",
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
win.show()
}
app.whenReady().then(createWindow)
```
### app/components/[App.tsx](https://github.com/matthiaaas/clean-electron-react/tree/main/app/components/App.tsx)
```tsx
export default function App() {
return null
}
```
## Packaging
Package your app using `electron-builder`. Output can be found in `/dist`
```
yarn package
```
## Why another boilerplate?
Other Electron React boilerplates come with a ton of additional dependencies and a predefined file structure.
This template is preconfigured from scratch and only includes essential parts and scripts so you can start developing right away.
### Minimalistic file structure
```c
├── app
├── components
│ └── App.tsx // rendered component
├── app.ts // electron entry file
├── index.html
├── root.tsx // react renderer
└── manifest.json
├── build // webpack build output
├── dist // electron-builder output
├── package.json
├── tsconfig.json
└── webpack.config.js
```