Steps to create Application
Step 1 : Creating a New Vite Project using below command :
npm create electron-vite
Step 2 : Configure the project by choosing the right options
project name: GFG template using Vite
Package name: gfg-template-using-vite
Step 3 : Choose React from the given list to implement your frontend using react :
Vue
>React
Vanilla
Step 4: Change Directory by running command and run npm install command to install the required packages.
cd name_of_your_project
npm install
Step 5: Add these in Tsconfig.json File so that you can use jsx components in tsx.
/* Bundler mode */
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"noImplicitAny": false,
Folder Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.6.0",
"@typescript-eslint/parser": "^6.6.0",
"@vitejs/plugin-react": "^4.0.4",
"eslint": "^8.48.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.2.2",
"vite": "^4.4.9",
"electron": "^26.1.0",
"electron-builder": "^24.6.4",
"vite-plugin-electron": "^0.14.0",
"vite-plugin-electron-renderer": "^0.14.5"
}
Example: Add the below code in the required files.
Javascript
//App.tsximport React, { useState } from "react";import './App.css'const App: React.FC = () => { const [count, setCount] = useState<number>(0); return ( <> <h1>Geeks for Geeks</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> </div> </> );};export default App; |
CSS
/* Write CSS Here *//* Change Index .css Button and Body Part by below code*/body { background-color: #2f8d46; color: #ffffff; display: flex; justify-content: center; align-items: center; text-align: center; place-items: center; min-width: 320px; min-height: 100vh;}button { border-radius: 8px; border: 3px solid black; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #2f8d46; cursor: pointer; transition: border-color 0.25s;} |
To start the application run the following command.
npm run dev
Output:
Working Sample
How to Intialize basic template for Electron JS project using Vite and React
ElectronJS, with its ability to create cross-platform desktop applications, has become very popular nowadays. When combined with modern tools like Vite and React, it provides a powerful stack for building feature-rich and performant desktop applications. In this article, we’ll learn the stepwise process to initialize a basic template for an ElectronJS project using Vite and React.