https://github.com/sprout2000/electron-react-ts
An Electron boilerplate with hot reloading for React and TypeScript.
https://github.com/sprout2000/electron-react-ts
boilerplate electron hot-reload react typescript
Last synced: 8 months ago
JSON representation
An Electron boilerplate with hot reloading for React and TypeScript.
- Host: GitHub
- URL: https://github.com/sprout2000/electron-react-ts
- Owner: sprout2000
- License: mit
- Created: 2021-06-29T05:13:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-08T01:20:11.000Z (9 months ago)
- Last Synced: 2025-04-02T08:08:41.666Z (8 months ago)
- Topics: boilerplate, electron, hot-reload, react, typescript
- Language: TypeScript
- Homepage:
- Size: 10.3 MB
- Stars: 74
- Watchers: 2
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# electron-react-ts
An [Electron](https://www.electronjs.org/) boilerplate with hot reloading for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/).
## :green_book: Usage
```sh
$ git clone https://github.com/sprout2000/electron-react-ts.git
$ cd electron-react-ts
$ npm install
# on development
$ npm run dev
# on production
$ npm run build
```
_NOTE: You will need to have [Node.js](https://nodejs.org/) and [Git](https://git-scm.com/) installed._
## :thumbsup: Features
- Supports hot reloading in both the main and renderer processes.
- No complicated pre-made settings.
The template provided by this scaffold is _NOT_ an all-in-one. It provides only the necessary and sufficient settings so that you can customize it as you like. In other words, it has no _"eject"_.
## :camera_flash: Screen shots
### Hot reload in renderer process
### Hot reload in main process
## :package: How to package your app to publish?
It is recommended to use [electron-builder](https://www.electron.build/).
```sh
npm install --save-dev electron-builder
```
Here's a sample script `builder.ts` for electron-builder:
```typescript
import { build } from "electron-builder";
build({
config: {
appId: "com.example.MyApp",
productName: "My App",
artifactName: "${productName}-${version}-${platform}-${arch}.${ext}",
files: ["dist/**/*"],
directories: {
output: "release",
},
},
});
```
And then run the script above...
```sh
npx ts-node ./builder.ts
```
See [Common Configuration](https://www.electron.build/configuration) for more details.
## :art: How to use sass (`*.scss`) in your project?
You will need to add [sass](https://www.npmjs.com/package/sass) and [sass-loader](https://www.npmjs.com/package/sass-loader):
```sh
npm install --save-dev sass sass-loader
```
And then, update your `webpack.config.ts`:
```typescript
module: {
rules: [
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
```
## :copyright: Copyright
Copyright (c) 2022 sprout2000