This repository provides a bare bones boilerplate for an Electron application using React as the frontend framework with Vite.
To get started with the project, follow these steps:
- Clone the GitHub repository.
- Run
npm i
to install the necessary dependencies. - Open the
vite.config.js
file and locate the server port configuration. This is the port where the React application will be running. - In the
package.json
file, navigate to the scripts section and ensure that the TCP port matches the one specified in the configuration file. - Run
npm run dev
to start the development server. - To build for production, run
npm run build
. Replace all "your-icon" placeholder in the build script with the path to your icon.
- In the
vite.config.js
file, thebase: "./"
configuration ensures that the application runs on the root file. - The
main
property in thepackage.json
file specifies the entry point for the Electron file. - Within the
scripts
section, theserve
script runs Vite to serve the React application on a server, while theelectron
script starts the Electron app but waits until the server is running on the specified port before launching Electron. - The
npm run dev
command simplifies this process into one command and sets the environment variable to development usingcross-env
. - The
build
script builds the React app with Vite, andelectron-build
builds the Electron app usingelectron-builder
. - The
npm run prod
command combines these two processes. - The
build
folder outside of the scripts section is used by Electron Builder to build the application. Themac
andwin
objects in theconfig
section ofelectron-builder.json
show configurations targeted for different operating systems. Thedirectories
object specifies the output folder of the built app, and thefiles
array indicates which files should be included in the build process. Please pay attention to thefiles
array.
In the electron.cjs
file, after creating the window, the current environment of the app is checked, and the files are served accordingly. In development mode, React runs on a specific port, while in production, it will be located in the dist
folder. The file path is adjusted accordingly.
Feel free to explore and modify this boilerplate to suit your needs. Happy coding! 🎉