electron-react-ts

An Electron boilerplate with hot reloading for React and TypeScript.

📗 Usage

$ 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 and Git installed.

👍 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".

📸 Screen shots

Hot reload in renderer process

Hot reload in main process

📦 How to package your app to publish?

It is recommended to use electron-builder.

npm install --save-dev electron-builder

Here's a sample script builder.ts for electron-builder:

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...

npx ts-node ./builder.ts

See Common Configuration for more details.

🎨 How to use sass (*.scss) in your project?

You will need to add sass and sass-loader:

npm install --save-dev sass sass-loader

And then, update your webpack.config.ts:

  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },

©️ Copyright

Copyright (c) 2022 sprout2000