Electron React App
Modern desktop application starter kit with Electron, React, TypeScript, TailwindCSS & Shadcn/UI to build cross-platform apps.
Overview:
The Electron React Webpack Typescript (Custom Titlebar) is a minimal and secure boilerplate for writing desktop applications using Electron, React, Webpack, and TypeScript. It includes a custom titlebar feature and special thanks are given to @guasam for their custom window titlebar and menus implementations. There is also mention of an alternative project called ElectroVite for using ViteJS instead of Webpack.
Features:
- Custom Titlebar for Electron Window
- Easily changable platform specific controls for max/min/close buttons
- Window frame title displayed in titlebar center when menus are toggled off
- Customizable menu entries in misc/window/titlebarMenus.ts file
- Easy customization of menu items, windows controls layout, and colors
- 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)
- Predefined aliases for import paths: @assets, @main, @renderer, @common, @misc, @src, @components
Summary:
The Electron React Webpack Typescript (Custom Titlebar) provides a minimal and secure boilerplate for developing desktop applications using Electron, React, Webpack, and TypeScript. It offers a custom titlebar feature and allows for easy customization of platform-specific controls and menu entries. The project also includes various core features such as Electron, TypeScript, React, and more. It provides predefined aliases for import paths and supports dark mode and light mode themes. Overall, it offers a comprehensive solution for building desktop applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.