- -# Core Features - -- ๐ Electron -- ๐ TypeScript -- โ๏ธ React -- ๐ฅ SASS/SCSS Loader -- ๐ถ LESS Loader (optional) -- ๐จ CSS Loader -- ๐ธ Image Loader -- ๐ Font Loader -- ๐งน ESLint -- ๐ฆ Electron Forge -- ๐ Custom Window Frame -- ๐ Custom Window Titlebar -- ๐ Custom Window Menubar -- ๐ฑ Webpack & Configuration -- ๐งฉ Aliases for Project Paths -- ๐ฅ React Fast Refresh + Webpack HMR -- ๐ Dark Mode + Light Mode (Theme) -- ๐ Package Bundling (Distribution / Release) - -
- -## Custom Aliases for Paths - -We can use predefined aliases for `import` paths already used in this project. Following are the details: - -| Alias | Target Path | -| ------------- | -------------------------- | -| `@assets` | `/assets` | -| `@main` | `/src/main` | -| `@renderer` | `/src/renderer` | -| `@common` | `/src/common` | -| `@misc` | `/misc` | -| `@src` | `/src` | -| `@components` | `/src/renderer/components` | - -
- -# Installation - - - -Main version of this project contains files structure in separate context for `main` and `renderer`, with custom electron window, titlebar etc. - -```bash -git clone https://github.com/codesbiome/electron-react-webpack-typescript-2023 -``` - -
-
- OR
-
-- - - -Minimal version of ERWT contains very simple project files structure, no custom window, no custom titlebar & menus. - -```bash -git clone -b minimal https://github.com/codesbiome/electron-react-webpack-typescript-2023 -``` - -
- -Install dependencies using [pnpm](https://pnpm.io/) or [yarn](https://www.npmjs.com/package/yarn) or [npm](https://www.npmjs.com/) : - -```bash -# using pnpm -pnpm install - -# or using yarn -yarn install - -# or using npm -npm install -``` - -
- -## Start : Development - -To develop and run your application, you need to run following command. -
-Start electron application for development : - -```bash -yarn start -``` - -
- -## Lint : Development - -To lint application source code using ESLint via this command : - -```bash -yarn lint -``` - -
- -## Package : Production - -Customize and package your Electron app with OS-specific bundles (.app, .exe etc) - -```bash -yarn package -``` - -
- -## Make : Production - -Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others). - -```bash -yarn make -``` - -
- -## Publish : Production - -Publishing is a way of taking the artifacts generated by the `make` command and sending them to a service somewhere for you to distribute or use as updates. (This could be your update server or an S3 bucket) - -```bash -yarn publish -``` - -
- -## Packager & Makers Configuration - -This provides an easy way of configuring your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files. - -This configurations file is available in : - -```bash -tools/forge/forge.config.js -``` - -For further information, you can visit [Electron Forge Configuration](https://www.electronforge.io/configuration) +A save manager desktop app for the game Exanima. diff --git a/TEMPLATE.md b/TEMPLATE.md new file mode 100644 index 0000000..6c94594 --- /dev/null +++ b/TEMPLATE.md @@ -0,0 +1,182 @@ +# Electron React Webpack Typescript (Custom Titlebar) + +A minimal secure boilerplate for writing Desktop Applications using [Electron](https://www.electronjs.org/), [React](https://reactjs.org/), [Webpack](https://webpack.js.org/) & [TypeScript](https://www.typescriptlang.org/) with Custom Titlebar. + + +
+
+
+Special thanks to [@guasam](https://github.com/guasam) for Custom Window Titlebar and Menus modules.
+
++ +###
Want to use ViteJS instead of Webpack?
+
+Introducing the [ElectroVite](https://github.com/guasam/electrovite-react) project with a brief description below.
+
+> A prebuilt project for creating desktop apps using Electron, React, ViteJS with blazing fast hot-reload, easy to use custom import aliases & executable builds for distribution.
+
+
+
+
++ + +# Custom Electron Window Titlebar & Menus etc. + +This project includes [electron-window](https://github.com/guasam/electron-window) for creating custom window components. + +**Following are the list of features it provides :** + +- Custom Titlebar for Electron Window. +- Easily changable platform specific controls for max/min/close buttons using `windows` or `mac` value for `platform` property with `
+ +# Core Features + +- ๐ Electron +- ๐ TypeScript +- โ๏ธ React +- ๐ฅ SASS/SCSS Loader +- ๐ถ LESS Loader (optional) +- ๐จ CSS Loader +- ๐ธ Image Loader +- ๐ Font Loader +- ๐งน ESLint +- ๐ฆ Electron Forge +- ๐ Custom Window Frame +- ๐ Custom Window Titlebar +- ๐ Custom Window Menubar +- ๐ฑ Webpack & Configuration +- ๐งฉ Aliases for Project Paths +- ๐ฅ React Fast Refresh + Webpack HMR +- ๐ Dark Mode + Light Mode (Theme) +- ๐ Package Bundling (Distribution / Release) + +
+ +## Custom Aliases for Paths + +We can use predefined aliases for `import` paths already used in this project. Following are the details: + +| Alias | Target Path | +| ------------- | -------------------------- | +| `@assets` | `/assets` | +| `@main` | `/src/main` | +| `@renderer` | `/src/renderer` | +| `@common` | `/src/common` | +| `@misc` | `/misc` | +| `@src` | `/src` | +| `@components` | `/src/renderer/components` | + +
+ +# Installation + + + +Main version of this project contains files structure in separate context for `main` and `renderer`, with custom electron window, titlebar etc. + +```bash +git clone https://github.com/codesbiome/electron-react-webpack-typescript-2023 +``` + +
+
+ OR
+
++ + + +Minimal version of ERWT contains very simple project files structure, no custom window, no custom titlebar & menus. + +```bash +git clone -b minimal https://github.com/codesbiome/electron-react-webpack-typescript-2023 +``` + +
+ +Install dependencies using [pnpm](https://pnpm.io/) or [yarn](https://www.npmjs.com/package/yarn) or [npm](https://www.npmjs.com/) : + +```bash +# using pnpm +pnpm install + +# or using yarn +yarn install + +# or using npm +npm install +``` + +
+ +## Start : Development + +To develop and run your application, you need to run following command. +
+Start electron application for development : + +```bash +yarn start +``` + +
+ +## Lint : Development + +To lint application source code using ESLint via this command : + +```bash +yarn lint +``` + +
+ +## Package : Production + +Customize and package your Electron app with OS-specific bundles (.app, .exe etc) + +```bash +yarn package +``` + +
+ +## Make : Production + +Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others). + +```bash +yarn make +``` + +
+ +## Publish : Production + +Publishing is a way of taking the artifacts generated by the `make` command and sending them to a service somewhere for you to distribute or use as updates. (This could be your update server or an S3 bucket) + +```bash +yarn publish +``` + +
+ +## Packager & Makers Configuration + +This provides an easy way of configuring your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files. + +This configurations file is available in : + +```bash +tools/forge/forge.config.js +``` + +For further information, you can visit [Electron Forge Configuration](https://www.electronforge.io/configuration)