Code2Tech

Understanding Electron and React.js Setup for It [Frontend]

March 31, 2025the_demon_sid

Learn about Electron, how to create amazing desktop apps with it, and leverage your React knowledge to enhance the development experience.

#Table of Contents

Prerequisites
What is Electron?
Why electron?
Setting Up the Project (React)

#Prerequisites

Before diving into this blog, ensure you have a solid understanding of the following topics:

Web Development Fundamentals
React Basics: Familiarity with the basic structure of a React project.
TypeScript (optional): While not mandatory, it can be helpful.

#What is Electron?

Electron is a framework for building desktop applications using web technologies like HTML, CSS, and JavaScript.
It enables the creation of cross-platform apps that work seamlessly(not everytime 😐) on Windows, macOS, and Linux.

In essence, you are writing simple web code (HTML CSS and JS) to build powerful(but quite heavy 😅) desktop applications.

Must know: A simple "Hello World" program in Electron can take up around 180MB of disk space.

My Advice: For a deeper understanding, refer to the official Electron Documentation.

#Why Electron?

Even with its large size compared to traditional methods, Electron stands out because:

It's easy to use, making it accessible for web developers.
It has a supportive and active community that continuously improves the framework.
The learning curve is minimal, as it's straightforward and beginner-friendly.

#Setting Up the Project (React)

Create a vite project


sh
npm create vite@latest

Do the following :

npm create vite

Choose the project name you want
Select React as framework
Select TypeScript (best practices)
and then run :


sh
cd your-project-name
npm install

Optional: Initialize a Git repository to track your changes and collaborate effectively if needed.

Try Running the react app you would see: npm dev

Create a new folder named web inside the src directory. This folder will house the web-specific part of your project.
Copy all the files from the src directory into the web folder. This separation ensures that the web and Electron parts of the project remain organized and modular.
Update the <script> tag's src attribute in your index.html file to point to the correct path.
This ensures that your application loads the appropriate scripts for the Electron environment.


html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/web/main.tsx"></script>
  </body>
</html>

Now run your react app via npm run dev and it will work as intended :)

#Adding Electron

#Step 1: Create a Folder for Electron

Create a folder named electron inside the src directory.
This folder will contain all the Electron-specific code, keeping it separate from the web code.

#Step 2: Install Electron

Install Electron as a dev dependency by running the following command:


sh
npm install electron --save-dev

Create a folder named electron inside the src directory.
Install Electron


sh
npm install electron --save-dev

Create a tsconfig.json inside src as we will have different typescript setup for electron app.


json
// src/electron/tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "NodeNext",
    "outDir": "../../dist-electron",
    "skipLibCheck": true,
    "types": ["../../types"]
  }
}

In the tsconfig.app.json exclude src/electron


json
// tsconfig.app.json
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"],
  "exclude": ["src/electron"]
}

Create main.ts inside the electron folder.Write any console you like for example


tsx
console.log("This is the_demon_sid from electron")

In package.json add


json
"main" : "dist/electron/main.js"
...
"scripts":{
  ...
  "dev:electron" : "electron ."
 }

this will run our main.js in dist/electron folder with elctron and you will receive a log on terminal.

March 31, 2025the_demon_sid

Understanding Electron and React.js Setup for It [Frontend]

March 31, 2025the_demon_sid

Learn about Electron, how to create amazing desktop apps with it, and leverage your React knowledge to enhance the development experience.

#Prerequisites

Before diving into this blog, ensure you have a solid understanding of the following topics:

Web Development Fundamentals
React Basics: Familiarity with the basic structure of a React project.
TypeScript (optional): While not mandatory, it can be helpful.

#What is Electron?

In essence, you are writing simple web code (HTML CSS and JS) to build powerful(but quite heavy 😅) desktop applications.

Must know: A simple "Hello World" program in Electron can take up around 180MB of disk space.

My Advice: For a deeper understanding, refer to the official Electron Documentation.

#Why Electron?

Even with its large size compared to traditional methods, Electron stands out because:

It's easy to use, making it accessible for web developers.
It has a supportive and active community that continuously improves the framework.
The learning curve is minimal, as it's straightforward and beginner-friendly.

#Setting Up the Project (React)

Create a vite project


sh
npm create vite@latest

Do the following :

npm create vite

Choose the project name you want
Select React as framework
Select TypeScript (best practices)
and then run :


sh
cd your-project-name
npm install

Optional: Initialize a Git repository to track your changes and collaborate effectively if needed.

Try Running the react app you would see: npm dev

Create a new folder named web inside the src directory. This folder will house the web-specific part of your project.
Copy all the files from the src directory into the web folder. This separation ensures that the web and Electron parts of the project remain organized and modular.
Update the <script> tag's src attribute in your index.html file to point to the correct path.
This ensures that your application loads the appropriate scripts for the Electron environment.


html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/web/main.tsx"></script>
  </body>
</html>

Now run your react app via npm run dev and it will work as intended :)

#Adding Electron

#Step 1: Create a Folder for Electron

Create a folder named electron inside the src directory.
This folder will contain all the Electron-specific code, keeping it separate from the web code.

#Step 2: Install Electron

Install Electron as a dev dependency by running the following command:


sh
npm install electron --save-dev

Create a folder named electron inside the src directory.
Install Electron


sh
npm install electron --save-dev

Create a tsconfig.json inside src as we will have different typescript setup for electron app.


json
// src/electron/tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "NodeNext",
    "outDir": "../../dist-electron",
    "skipLibCheck": true,
    "types": ["../../types"]
  }
}

In the tsconfig.app.json exclude src/electron


json
// tsconfig.app.json
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"],
  "exclude": ["src/electron"]
}

Create main.ts inside the electron folder.Write any console you like for example


tsx
console.log("This is the_demon_sid from electron")

In package.json add


json
"main" : "dist/electron/main.js"
...
"scripts":{
  ...
  "dev:electron" : "electron ."
 }

this will run our main.js in dist/electron folder with elctron and you will receive a log on terminal.

March 31, 2025the_demon_sid