Electron desktop app project structure

Electron desktop app project structure

Explorer

  • .git…
  • .huskynew
  • pre-commitnew
  • .vite…, not committed
  • .vscodenew
  • launch.jsonnew
  • .editorconfignew
  • .gitattributesnew
  • .gitignore
  • .nvmrcnew
  • .oxfmtrc.json
  • .oxlintrc.json
  • coverage…new, not committed
  • forge.config.mts
  • index.html
  • LICENSEnew
  • assetsnew
  • node_modules…, not committed
  • out…, not committed
  • package-lock.json
  • package.json
  • README.md
  • src
  • declarations.d.ts
  • index.css
  • main.ts
  • preload.ts
  • renderer.ts
  • testsnew
  • tsconfig.json
  • vite.main.config.mts
  • vite.preload.config.mts
  • vite.renderer.config.mts
  • vitest.config.tsnew
  1. # Create the app from the Vite template with TypeScript

    npx create-electron-app@latest notes-desktop --template=vite --typescript
  2. # Start it with hot reload for the renderer

    cd notes-desktop && npm start
  3. # Growing: a UI framework, validation and tests

    npm install react react-dom zod && npm install -D @vitejs/plugin-react @types/react @types/react-dom vitest
  4. # Production: logging, crash reports and auto-update

    npm install electron-log @sentry/electron update-electron-app
  5. # Production: end-to-end tests with Playwright

    npm install -D @playwright/test
  6. # Build installers for the current platform

    npm run make
  7. # Build, sign and upload a release (in CI, per platform)

    npm run release