Frontend-local-env

npm run dev

📂 Directory structure

Familiar React application structure, just with electron folder on the top 😉
Files in this folder will be separated from your React application and built into dist-electron

├── electron                                 Electron-related code
│   ├── main                                 Main-process source code
│   └── preload                              Preload-scripts source code
│
├── release                                  Generated after production build, contains executables
│   └── {version}
│       ├── {os}-{os_arch}                   Contains unpacked application executable
│       └── {app_name}_{version}.{ext}       Installer for the application
│
├── public                                   Static assets
└── src                                      Renderer source code, your React application

🚨 Be aware

This template integrates Node.js API to the renderer process by default. If you want to follow Electron Security Concerns you might want to disable this feature. You will have to expose needed API by yourself.

To get started, remove the option as shown below. This will modify the Vite configuration and disable this feature.

# vite.config.ts

export default {
  plugins: [
    ...
-   // Use Node.js API in the Renderer-process
-   renderer({
-     nodeIntegration: true,
-   }),
    ...
  ],
}

🔧 Additional features

1. electron-updater 👉 see docs
2. playwright

❔ FAQ

• dependencies vs devDependencies
• C/C++ addons, Node.js modules - Pre-Bundling