Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LuanRoger/electron-shadcn
:electron: Electron Forge with shadcn-ui (Vite + Typescript)
https://github.com/LuanRoger/electron-shadcn
electron electron-forge github-actions i18n jest linux macos playwright prettier react shadcn-ui storybook tailwindcss typescript vite windows
Last synced: 3 months ago
JSON representation
:electron: Electron Forge with shadcn-ui (Vite + Typescript)
- Host: GitHub
- URL: https://github.com/LuanRoger/electron-shadcn
- Owner: LuanRoger
- License: mit
- Created: 2024-01-11T13:29:15.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-22T20:17:53.000Z (4 months ago)
- Last Synced: 2024-07-23T16:13:02.508Z (4 months ago)
- Topics: electron, electron-forge, github-actions, i18n, jest, linux, macos, playwright, prettier, react, shadcn-ui, storybook, tailwindcss, typescript, vite, windows
- Language: TypeScript
- Homepage:
- Size: 4.13 MB
- Stars: 47
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - electron-shadcn - Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. (Boilerplates / Templates / Portfolios)
- awesome-shadcn-ui - electron-shadcn - Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. (Templates)
- awesome-shadcn-ui - electron-shadcn - Electron app template with shadcn/ui and a bunch of other libs and tools ready to use. (Templates)
README
# 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.
### Core ๐๏ธ
- [Electron 30](https://www.electronjs.org)
- [Vite 5](https://vitejs.dev)
- [SWC](https://swc.rs)
### DX ๐ ๏ธ
- [TypeScript](https://www.typescriptlang.org)
- [Prettier](https://prettier.io)
- [Zod](https://zod.dev)
- [React Query (Tan Stack)](https://react-query.tanstack.com)
### UI ๐จ
- [React](https://reactjs.org)
- [Tailwind CSS](https://tailwindcss.com)
- [Shadcn UI](https://ui.shadcn.com)
- [Geist](https://vercel.com/font) as default font
- [i18next](https://www.i18next.com)
- [Lucide](https://lucide.dev)
### Test ๐งช
- [Jest](https://jestjs.io)
- [Playwright](https://playwright.dev)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
### Packing and distribution ๐ฆ
- [Electron Forge](https://www.electronforge.io)
### Documentation ๐
- [Storybook](https://storybook.js.org)
### CI/CD ๐
- Pre-configured [GitHub Actions workflow](https://github.com/LuanRoger/electron-shadcn/blob/main/.github/workflows/playwright.yml), 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`](https://github.com/LuanRoger/electron-shadcn/tree/main/src/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
```plaintext
.
โโโ ./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:
```bash
npm run
```
- `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
```bash
git clone https://github.com/LuanRoger/electron-shadcn.git
```
Or use it as a template on GitHub
2. Install dependencies
```bash
npm install
```
3. Run the app
```bash
npm run start
```
## Used by
- [yaste](https://github.com/LuanRoger/yaste) - yaste (Yet another super โแตขโโโโ text editor) is a text editor, that can be used as an alternative to the native text editor of your SO, maybe.
- [eletric-drizzle](https://github.com/LuanRoger/electric-drizzle) - shadcn-ui and Drizzle ORM with Electron.
> Does you've used this template in your project? Add it here and open a PR.
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/LuanRoger/electron-shadcn/blob/main/LICENSE) file for details.