huyixi / webtobook-fe

electron-shadcn

Electron in all its glory. Everything you will need to develop your beautiful desktop application.

Libs and tools

To develop a Electron app, you probably will need some UI, test, formatter, style or other kind of library or framework, so let me install and configure some of them to you.

Engine 🏍️

• Electron 30
• Vite 5
• SWC

DX 🛠️

• TypeScript
• Prettier
• Zod
• React Query (Tan Stack)

UI 🎨

• React
• Tailwind CSS
• Shadcn UI
• Geist as default font
• i18next
• Lucide

Test 🧪

• Jest
• Playwright
• React Testing Library

Packing and distribution 📦

• Electron Forge

Documentation 📚

• Storybook

CI/CD 🚀

• Pre-configured GitHub Actions workflow workflow, for test with Playwright

Project preferences 🎯

• Use Context isolation
• titleBarStyle: hidden (Using custom title bar)
• Geist as default font
• Some default styles was applied, check the styles directory

If you don't know some of these libraries or tools, I recommend you to check their documentation to understand how they work and how to use them.

Directory structure

.
└── ./src/
    ├── ./src/assets/
    │   └── ./src/assets/fonts/
    ├── ./src/components/
    │   └── ./src/components/ui/
    ├── ./src/helpers/
    │   └── ./src/helpers/ipc/
    ├── ./src/layout/
    ├── ./src/lib/
    ├── ./src/pages/
    ├── ./src/stories/
    ├── ./src/style/
    └── ./src/tests/

• src/: Main directory
  • assets/: Store assets like images, fonts, etc.
  • components/: Store UI components
    • ui/: Store Shadcn UI components (this is the default direcotry used by Shadcn UI)
  • helpers/: Store IPC related functions to be called in the renderer process
    • ipc/: Directory to store IPC context and listener functions
      • Some implementations are already done, like theme and window for the custom title bar
  • layout/: Directory to store layout components
  • lib/: Store libraries and other utilities
  • pages/: Store app's pages
  • stories/: Store Storybook stories
  • style/: Store global styles
  • tests/: Store tests (from Jest and Playwright)

NPM script

To run any of those scripts:

npm run <script>

• start: Start the app in development mode
• package: Package your application into a platform-specific executable bundle and put the result in a folder.
• make: Generate platform-specific distributables (e.g. .exe, .dmg, etc) of your application for distribution.
• publish: Electron Forge's way of taking the artifacts generated by the make command and sending them to a service somewhere for you to distribute or use as updates.
• prett: Run Prettier to format the code
• storybook: Start Storybook
• build-storybook: Run the Storybook's build command
• test: Run the default unit-test script (Jest)
• test:watch: Run the default unit-test script in watch mode (Jest)
• test:unit: Run the Jest tests
• test:e2e: Run the Playwright tests
• test:all: Run all tests (Jest and Playwright)

The test scripts involving Playwright require the app be builded before running the tests. So, before run the tests, run the package, make or publish script.

How to use

1. Clone this repository

git clone https://github.com/LuanRoger/electron-shadcn.git

Or use it as a template on GitHub

2. Install dependencies

npm install

3. Run the app

npm run start