Sunday, 21 November, 2021 UTC


Summary

vite-react-electron
Super-fast Vite + React + Antd + Electron boilerplate.
Run Setup
# clone the project
git clone [email protected]:caoxiemeihao/vite-react-electron.git

# enter the project directory
cd vite-react-electron

# install dependency
npm install

# develop
npm run dev
Directory
├
├── configs
├   ├── vite.main.ts                 Main-process config file, for -> src/main
├   ├── vite.preload.ts              Preload-script config file, for -> src/preload
├   ├── vite.renderer.ts             Renderer-script config file, for -> src/renderer
├
├── scripts
├   ├── build.mjs                    Build script, for -> npm run build
├   ├── electron-builder.config.mjs
├   ├── watch.mjs                    Develop script, for -> npm run dev
├
├── src
├   ├── main                         Main-process source code
├   ├── preload                      Preload-script source code
├   ├── renderer                     Renderer-process source code
├

dist and src

  • Once npm run dev or npm run build is executed. Will be generated dist, it is the same as the src structure.
  • This ensures the accuracy of path calculation.
├── dist
|   ├── main
|   ├── preload
|   ├── renderer
├── src
|   ├── main
|   ├── preload
|   ├── renderer
|
How to work
  • The Main-process, Renderer-process and Preload-script are all config in configs/xxx.ts.
  • All files are built using Vite, is supper fast.
  • scripts/build.mjs only calls the Vite API and uses the configs/xxx.ts config file to build.
  • The difference between scripts/watch.mjs and build.mjs is that the watch option is configured for the Main-process and Preload-script. The Renderer-process uses require ('vite').createServer
  • Manage projects more through configuration other than scripts. -- 🥳 Simple and clear
GitHub
https://github.com/caoxiemeihao/vite-react-electron