From 2426e2c786c452a94dca29c0efc8ca872abd4c72 Mon Sep 17 00:00:00 2001 From: Kalyn Coose Date: Mon, 4 Dec 2023 19:31:35 -0700 Subject: [PATCH] Update readmes --- README.md | 183 +--------------------------------------------------- TEMPLATE.md | 182 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 184 insertions(+), 181 deletions(-) create mode 100644 TEMPLATE.md diff --git a/README.md b/README.md index 6c94594..6e9a5d6 100644 --- a/README.md +++ b/README.md @@ -1,182 +1,3 @@ -# Electron React Webpack Typescript (Custom Titlebar) +# Salvus -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 `` in renderer. -- Titlebar menus can show/hide by pressing `alt` or `option` key. -- Window frame `title` prop displays in titlebar center when menus are toggeled off. -- Menu entries can be customized in `misc/window/titlebarMenus.ts` file. -- Menu items and windows controls layout or colors can be customized easily by modifying the `misc/window` modules. - -

- -# 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 - -![status](https://img.shields.io/badge/ERWT-Main%20Version-blue.svg) - -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 -
-
- -![status](https://img.shields.io/badge/ERWT-Minimal%20Version-0a922a.svg) - -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 `` in renderer. +- Titlebar menus can show/hide by pressing `alt` or `option` key. +- Window frame `title` prop displays in titlebar center when menus are toggeled off. +- Menu entries can be customized in `misc/window/titlebarMenus.ts` file. +- Menu items and windows controls layout or colors can be customized easily by modifying the `misc/window` modules. + +

+ +# 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 + +![status](https://img.shields.io/badge/ERWT-Main%20Version-blue.svg) + +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 +
+
+ +![status](https://img.shields.io/badge/ERWT-Minimal%20Version-0a922a.svg) + +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)