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 cross-platform electron hot-reload linux macos react template typescript webpack windows

Last synced: 3 days 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 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-31T02:11:14.000Z (14 days ago)
• Last Synced: 2024-10-31T03:18:32.597Z (14 days ago)
• Topics: boilerplate, cross-platform, electron, hot-reload, linux, macos, react, template, typescript, webpack, windows
• Language: TypeScript
• Homepage:
• Size: 10.3 MB
• Stars: 73
• Watchers: 3
• Forks: 11
• 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/).

![GitHub last commit](https://img.shields.io/github/last-commit/sprout2000/electron-react-ts)

![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/dev/electron)

![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/react)

![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/sprout2000/electron-react-ts/dev/typescript)

## :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