https://github.com/terrence-ou/npx-electron-react-shadcn
An npx command-line tool to set up electron-react-shadcn project
https://github.com/terrence-ou/npx-electron-react-shadcn
electron npx react shadcn-ui tailwindcss typescript vite vitest
Last synced: 3 months ago
JSON representation
An npx command-line tool to set up electron-react-shadcn project
- Host: GitHub
- URL: https://github.com/terrence-ou/npx-electron-react-shadcn
- Owner: terrence-ou
- License: mit
- Created: 2024-11-10T22:37:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T17:45:46.000Z (over 1 year ago)
- Last Synced: 2026-01-03T14:33:46.388Z (6 months ago)
- Topics: electron, npx, react, shadcn-ui, tailwindcss, typescript, vite, vitest
- Language: CSS
- Homepage: https://www.npmjs.com/package/electron-react-shadcn
- Size: 18.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# electron-react-shadcn
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org/en/download/package-manager)
An npx cli for creating electron app with react and shadcn. The main template is located at [electron-react-shadcn](https://github.com/terrence-ou/electron-react-shadcn).
```bash
npx electron-react-shadcn
```
## Overview
This Electron boilerplate enables developers to quickly build cross-platform apps using Electron, Vite, and React with Shadcn UI. Based on [@alex8088](https://github.com/alex8088)’s awesome `npm create @quick-start/electron` package, this template includes added styling (Tailwind, Shadcn UI) and testing libraries (Jest, Testing Library) to streamline setup and save development time.
### Tech Stack
| Category | Technology |
|---------------------------|---------------------------------------------------------------------------------------------|
| **Software Framework** | [Electron](https://www.electronjs.org/) |
| **Frontend Library** | [React](https://react.dev/) |
| **Build Tool** | [Vite](https://vite.dev/), [Electron-Vite](https://electron-vite.org/) |
| **UI and Styling** | [shadcn](https://ui.shadcn.com/), [Tailwind](https://tailwindcss.com/) |
| **Testing** | [Vitest](https://vitest.dev), [Testing Library](https://testing-library.com/) |
## Quick Start
### Option 1 (Recommended): Use `npx electron-react-shadcn` to create a new project.
You can use this command to create a new project with this boilerplate directly in the directory. You can also setup and project name and theme colors by following the command prompts.
```bash
# create a new project using this boilerplate
npx electron-react-shadcn
# navigate to the project folder
cd electron-react-shadcn
# install dependencies and run the project in dev mode
npm install && npm run dev
```
### Option 2: Clone this repository directly
You can use this boilerplate by directly downloading or clone this repository, and install the dependencies.
```bash
# clone this project
git clone https://github.com/terrence-ou/electron-react-shadcn.git
# navigate to the project folder
cd electron-react-shadcn
# you can choose to remove the git info from this repo to avoid potential git conflicts
sudo rm -r .git
# install dependencies
npm install
# start the project in dev mode
npm run dev
```
### Test and build commands
There're some pre-defined commands you might find useful
```bash
# run unit test
npm run test
# run test coverage
npm run coverage
# build app for different platforms
npm run build:mac # build for mac
npm run build:win # build for windows
npm run build:linux # build for linux
```
## Project Structure
```
├── resources/ # Additional resources for the app
├── src/ # Main source code
│ ├── main/ # Main process code
│ │ ├── lib/ # Libraries for main process logic
│ │ └── index.ts # Entry point for the main process
│ ├── preload/ # Preload scripts
│ │ ├── index.ts # Preload script entry point
│ │ └── index.d.ts # TypeScript declarations for preload
│ ├── renderer/ # Renderer process code (front-end)
│ │ ├── src/ # Source for renderer
│ │ │ ├── __tests__/ # Tests for renderer components
│ │ │ ├── assets/ # Assets for the renderer
│ │ │ ├── components/ # React components
│ │ │ │ └── ui/ # Shadcn UI components
│ │ │ └── utils/ # Utility functions
│ │ ├── App.tsx # Main application component
│ │ ├── env.d.ts # TypeScript environment declarations
│ │ ├── main.tsx # Main entry point for the renderer
│ │ └── index.html # HTML template for the renderer
│ └── shared/ # Shared code between main and renderer
├── .gitignore # Git ignore patterns
├── components.json # Shadcn Components configuration
├── electron.vite.config.ts # Vite configuration for Electron
├── vitest.config.mjs # Vitest testing configuration
├── LICENSE # Project license
├── package.json # Project metadata and dependencies
├── package-lock.json # Dependency lock file
├── postcss.config.js # PostCSS configuration
├── README.md # Project documentation
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration (general)
├── tsconfig.node.json # TypeScript configuration for Node.js
└── tsconfig.web.json # TypeScript configuration for web
```