Electron, TypeScript, MUI (formerly Material-UI), React Boilerplate

Modern and lightweight boilerplate built with electron, typescript, react, webpack, and mui. This also demonstrates live-reloading and static images.

Screenshot

Major technologies

React.js 18
Electron 19
MUI 5 (formerly Material-UI)
Webpack 5
Typescript, ESLint, and Prettier are used to improve the developer experience

Requires

Recommended tools

Visual Studio Code
- Prettier extension (formatting)
- ESLint extension (error checking)
NVM (mac only. helps to manage multiple node.js versions on your machine)

Getting Started

Download this repo or run the following command to clone it

git clone https://github.com/hellosoftware-io/electron-typescript-react-material-ui myapp

Navigate to the project root

cd myapp

Using NPM 7+, run the following command to install dependencies

npm install

Run the following command to build and start the development version of your app with live reloading.

npm run dev

Packaging

Run npm run package to build and package your electron app.

Common issues

xcrun: error: invalid active developer path

This is caused when elecron-builder tries to sign a build. Run xcode-select --install to install the necessary Xcode tools.

Folder structure

myapp/
| - dist/               //- Generated by Webpack automatically
| - node_modules/
| - packages/           //- Generated by build script automatically
| - static/             //- Global static assets
| | - electron.svg
| - src/
| | - main/             //- Backend modules for the Electron app
| | | - main.ts         //- Entry point of 'electron-main'
| | - renderer/         //- Frontend React components for the Electron app
| | | - index.tsx       //- Entry point of 'electron-renderer'
| - webpack/            //- Webpack config files
| | - electron.webpack.ts
| | - react.webpack.ts
| - .eslintrc           //- ESLint config
| - .gitignore
| - package-lock.json
| - package.json
| - tsconfig.json       //- TypeScript config
| - webpack.config.js   //- Webpack config

Contributing

Pull requests are always welcome .

License

This project is licensed under the terms of the MIT license.

Project Name	Stars	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
React Native Starter Kit	3,228		3 months ago			13	mit	JavaScript
:rocket: A React Native boilerplate app to get you up and running very, very quickly :rocket:
Ts Nextjs Tailwind Starter	1,728		21 hours ago			3		TypeScript
🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features
Landy React Template	801		7 months ago	24	June 10, 2021	4	mit	TypeScript
Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.
Nextarter Chakra	626		4 days ago			1	mit	TypeScript
battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup ✨
Generator React Webpack Redux	555	2	5 years ago	14	January 29, 2017	n,ull	mit	JavaScript
React Webpack Generator including Redux support
Electron React Webpack Boilerplate	402		12 days ago	40	March 06, 2021	16	mit	JavaScript
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Mern	350		a month ago			5	mit	JavaScript
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
React Webpack 5 Tailwind 2	289		9 months ago			5	mit	JavaScript
React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Mernboilerplate Antd	271		a year ago			n,ull	mit	JavaScript
A MERN boilerplate repository using Antd-Pro with RBAC feature, following all production best practices.
Workflow Reactjs	152		2 years ago					JavaScript
My workflow with ReactJS + Webpack 3+

Electron Typescript React Mui