How to Intialize basic template for Electron JS project using Vite and React
Last Updated :
17 Jan, 2024
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.
Prerequisites:
ElectronJS
ElectronJS is a powerful open-source framework that has the capability to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. Electron is an open-source project maintained by the OpenJS Foundation. Electron has gained a lots of popularity for its ability to create native-like applications for Windows, macOS, and Linux from a single codebase.
Key Features of ElectronJS:
- Cross-Platform Compatibility: Electron allows developers to create applications that run seamlessly on multiple operating systems.
- Web Technologies: Leveraging web technologies ensures familiarity for web developers transitioning to desktop application development.
- Extensive Ecosystem: A rich set of libraries and tools available within the Electron ecosystem simplifies development.
Vite
Vite is a modern build tool that significantly enhances the development experience for web projects. Known for its speed and simplicity, Vite is an excellent choice for building Electron applications.
Key Features of Vite:
- Fast Development Server: Vite comes with an ultra-fast development server that significantly reduces the build time during development.
- Plug-and-Play Architecture: With a modular architecture, Vite embraces the ES Module system, making it easy to manage dependencies.
When ElectronJS and Vite bundled together, you can harness the strengths of both technologies to create efficient and performant desktop applications.
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
import 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
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 : 100 vh;
}
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.25 s;
}
|
To start the application run the following command.
npm run dev
Output:
Working Sample
Share your thoughts in the comments
Please Login to comment...