Note

The repository name ends with remix but this now supports react-router v7 by #2

README

A boilerplate for Electron + Vite + React Router v7 (framework mode). You can use Electron’s API within loader and action.

No SSR version is available at a branch, no-ssr.

Getting Started

You'll see a window by electron if you run the following commands.

$ pnpm install
$ pnpm dev:main

Variations

There are some variations of this boilerplate.

• shadcn/ui.sidebar-09: shadcn/ui sidebar-09 is installed with react-router v7.
• shadcn/ui.sidebar-10: shadcn/ui sidebar-10 is installed with react-router v7.
• shadcn/ui.sidebar-15.no-ssr: shadcn/ui sidebar-15 is installed with react-router v7.

Development

There are three script tasks for development.

• dev:renderer
• dev:main
• build:unpack

From top to bottom, these tasks are intended for developing the renderer process, developing the main process, and checking the app behavior after building, respectively.

	dev:renderer	dev:main	build:unpack
purpose	develop renderer process	develop main process	check built app
electron	available	available	available
NODE_ENV	development	development	production
interface	browser	electron window	electron window

dev:renderer

This task is intended for developing the renderer process.

dev:renderer launches the vite-dev-server inside Electron. A URL will be displayed, which you can open in your browser. Its purpose is similar to remix vite:dev.

$ pnpm dev:renderer
...
  ➜  Local:   http://localhost:5173/

dev:main

This task is intended for developing the main process.

dev:main builds the main and preload processes and launches them in Electron. The generated files are output to ./out.

Like dev:renderer, it also starts the vite-dev-server.

• main process : out/main/index.mjs
• renderer process : out/preload/index.cjs
• renderer process : http://localhost:5173/

Changes under src/renderer/** will trigger HMR and reload automatically.

Changes under src/{main,preload}/** will not be reflected immediately. To apply changes, run build:main or build:preload. This will restart Electron, and the changes will take effect.

build:unpack

This task is intended for checking the app behavior after building.

build:unpack uses electron-builder to output the app in an unpacked format to ./dist. Launch the app for each specific OS.

For example, on macOS, it generates an executable as follows:

dist/mac-${arch}/${app_name}.app/Contents/MacOS/${app_name}

TODO

• build tool investigation
  • https://zenn.dev/righttouch/articles/86457bf2908379
  • https://zenn.dev/ssssota/articles/e59cf5adaf97ce#rspack
• quick start : https://www.electronjs.org/docs/latest/tutorial/quick-start
• vite-plugin-node-polyfills : fir for 'Module "node:path" has been externalized for browser compatibility'
• build into ./out
• await import("electron")
• build:unpack
• IPC.
  • main -> renderer
  • renderer -> main
• reload on change.
  • renderer: by vite dev. already.
  • preload: by reload (if code changes).
  • main: by relauching (if code changes).
• use local URL as renderer for development. (RENDERER_URL=http://localhost:3000)
• auto detect listening port.
• save/restore window position and size.
• rebuild main and preload on change.
• environment variables are available in main with global.process.env.
• configure electron paths like appData.
• support .env, .env.local, .env.development, ...
  • dev:renderer
  • dev:main
  • build:unpack
• react-router v7
  • dev-server works.
  • vte:build works.
  • build:unpack works.
  • SPA
  • SSR
    • vite-dev-server works.
    • [x] assets served by express. worked but deleted.
    • assets served by electron.
• dev/build variation
  • dev:renderer -- to develop UI mainly with vite-dev-server.
  • dev:main -- to develop main process mainly with vite-dev-server.
  • build:unpack -- to build unpacked app.
• logging with electron-log.
• navigation history by pressing back/forward accelerators.
• typecheck
• environment variables, APP_PATH_ROOT and VITE_APP_PATH_ROOT.
• auto update with electron-updater.