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.

Prerequisites:

• Node JS
• React JS
• JavaScript Or TypeScript as the Main language
• Node and NPM installed

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

//App.tsx

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

/* 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