Skip to content

Commit bdf62e4

Browse files
npv2k1npv2k1
authored
Merge pull request #1 from pnstack/copilot/setup-typescript-electron-template
Setup open source TypeScript Electron template with React and TailwindCSS
2 parents b39da88 + 5b2ac14 commit bdf62e4

19 files changed

Lines changed: 8032 additions & 1 deletion

‎.gitignore‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Dependencies
2+
node_modules
3+
.pnp
4+
.pnp.js
5+
6+
# Build output
7+
dist
8+
dist-electron
9+
build
10+
out
11+
12+
# Environment variables
13+
.env
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
# Logs
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
lerna-debug.log*
24+
25+
# OS
26+
.DS_Store
27+
Thumbs.db
28+
29+
# IDE
30+
.vscode/*
31+
!.vscode/extensions.json
32+
.idea
33+
*.swp
34+
*.swo
35+
*~
36+
.project
37+
.classpath
38+
.settings/
39+
*.sublime-workspace
40+
41+
# Testing
42+
coverage
43+
44+
# Temp
45+
*.log
46+
.cache

‎.vscode/extensions.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"esbenp.prettier-vscode",
5+
"bradlc.vscode-tailwindcss"
6+
]
7+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 pnstack
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,121 @@
1-
# template-electron
1+
# Template Electron
2+
3+
A modern, production-ready Electron application template built with TypeScript, React, and TailwindCSS.
4+
5+
## 🚀 Features
6+
7+
- ⚡ **Vite** - Lightning fast HMR and build tool
8+
- ⚛️ **React 19** - Latest React with hooks
9+
- 🔷 **TypeScript** - Type safety and better DX
10+
- 🎨 **Tailwind CSS** - Utility-first CSS framework
11+
- 📦 **Electron Builder** - Package and distribute your app
12+
- 🔒 **Secure** - Context isolation and secure IPC
13+
14+
## 📋 Prerequisites
15+
16+
- Node.js 18+ and npm
17+
18+
## 🛠️ Installation
19+
20+
```bash
21+
# Clone the repository
22+
git clone https://github.com/pnstack/template-electron.git
23+
24+
# Navigate to the project directory
25+
cd template-electron
26+
27+
# Install dependencies
28+
npm install
29+
```
30+
31+
## 💻 Development
32+
33+
```bash
34+
# Start the development server
35+
npm run dev
36+
```
37+
38+
This will start the Vite dev server and launch the Electron application with hot-reload enabled.
39+
40+
## 🏗️ Building
41+
42+
```bash
43+
# Build for production
44+
npm run build
45+
46+
# Build and package for your current platform
47+
npm run electron:build
48+
49+
# Build for specific platforms
50+
npm run electron:build:win # Windows
51+
npm run electron:build:mac # macOS
52+
npm run electron:build:linux # Linux
53+
```
54+
55+
The packaged application will be in the `release` directory.
56+
57+
## 📁 Project Structure
58+
59+
```
60+
template-electron/
61+
├── src/
62+
│ ├── main/ # Electron main process
63+
│ │ └── main.ts # Main process entry
64+
│ ├── preload/ # Preload scripts
65+
│ │ └── preload.ts # Secure IPC bridge
66+
│ └── renderer/ # React application
67+
│ ├── App.tsx # Main React component
68+
│ ├── main.tsx # React entry point
69+
│ ├── index.css # Tailwind directives
70+
│ └── electron.d.ts # TypeScript definitions
71+
├── index.html # HTML template
72+
├── vite.config.ts # Vite configuration
73+
├── tailwind.config.js # Tailwind configuration
74+
├── tsconfig.json # TypeScript config (renderer)
75+
├── tsconfig.node.json # TypeScript config (main/preload)
76+
└── package.json # Project dependencies
77+
```
78+
79+
## 🔧 Configuration
80+
81+
### Vite
82+
The Vite configuration (`vite.config.ts`) includes:
83+
- React plugin for JSX/TSX support
84+
- Electron plugin for main and preload scripts
85+
- Path aliases for cleaner imports
86+
87+
### Electron
88+
The main process (`src/main/main.ts`) creates the browser window and handles:
89+
- Window creation and management
90+
- Loading the renderer in dev/prod mode
91+
- IPC communication with renderer
92+
93+
### Tailwind CSS
94+
Configure Tailwind by editing `tailwind.config.js`. The template includes:
95+
- Configured content paths for tree-shaking
96+
- Ready for custom themes and plugins
97+
98+
## 🔒 Security
99+
100+
This template follows Electron security best practices:
101+
- Context isolation enabled
102+
- Node integration disabled
103+
- Secure IPC via preload script
104+
- No direct Node.js access in renderer
105+
106+
## 🤝 Contributing
107+
108+
Contributions are welcome! Please feel free to submit a Pull Request.
109+
110+
## 📄 License
111+
112+
MIT License - feel free to use this template for any project!
113+
114+
## 🙏 Acknowledgments
115+
116+
Built with:
117+
- [Electron](https://www.electronjs.org/)
118+
- [React](https://react.dev/)
119+
- [Vite](https://vitejs.dev/)
120+
- [Tailwind CSS](https://tailwindcss.com/)
121+
- [TypeScript](https://www.typescriptlang.org/)

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Electron + React + TypeScript + Tailwind</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/renderer/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)