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/electro...
📚 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:
/ @pikocanfly
#JavaScrip #Electron #ReactJS #coding #tutorial