Create a Desktop App with Electron, React, and Vite Using Electron Forge

A step-by-step walkthrough showing how to set up a modern desktop application using Electron Forge, React, and Vite. We start from an empty directory and build up a fully functional development environment with hot-reloading and clean component architecture. 🔧 Tools & Technologies Used Electron Forge – official tool for scaffolding and managing Electron apps React – library for building user interfaces Vite – fast frontend tooling with support for modern frameworks JavaScript / JSX – for building both the main and renderer processes 📁 Starter Project Repository 🔗 GitHub: https://github.com/PikoCanFly/electron-react-vite-starter-project 📚 Documentation Links React Docs: https://react.dev/ Electron Docs: https://www.electronjs.org/docs/latest/ Electron Forge Docs: https://www.electronforge.io/ 📌 What You'll Learn - How to scaffold a new Electron app with Vite using Electron Forge - How to manually integrate React - How to set up JSX support with vite-plugin-react - How to structure your Electron app using preload scripts and renderer logic - How to render React components inside Electron windows - How to push your starter project to GitHub for reuse ⏱️ Chapters 0:00 - Intro: Add React to Electron with Vite and Electron Forge 0:20 - Requirements: Install Node.js and npm for Electron projects 0:40 - Setup: Create a new Electron app using Electron Forge with Vite 1:10 - Run Electron app for the first time 1:40 - Understand Electron's main and renderer processes 2:10 - Install React and ReactDOM in an Electron Vite app 2:40 - Convert renderer.js to React with JSX support 3:10 - Set up a root React component in Electron 3:40 - Edit index.html to support React root element 4:10 - Render React app inside Electron using createRoot 4:40 - Why JSX fails without a Vite plugin 5:10 - Install vite-plugin-react for modern JSX support 5:40 - Configure vite.config.mjs to enable React plugin 6:10 - Confirm hot-reloading and React rendering works 6:40 - Create and import a custom React component 7:10 - Render the Profile component in renderer.jsx 7:40 - Verify new React component works in the Electron app 8:10 - Recap: What we built with Electron, React, and Vite 8:40 - Push your Electron React project to GitHub 9:10 - Reuse this Electron starter template for future apps 9:30 - Outro: Like, subscribe, and share your thoughts Join this channel to get access to perks: https://www.youtube.com/channel/UC8NoIbiu78iGMnh_xezgx8A/join #JavaScrip #Electron #ReactJS #coding #tutorial