Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rahil1202/electron-react-vite-template
A complete setup for building a cross-platform desktop application using React (frontend), Vite (development tooling), Node.js (backend), and Electron (desktop environment). This project serves as a template for developers looking to build modern desktop applications with a lightweight backend.
https://github.com/rahil1202/electron-react-vite-template
electron electronjs full-stack-application nodejs reactjs template vite vite-plugin
Last synced: 7 days ago
JSON representation
A complete setup for building a cross-platform desktop application using React (frontend), Vite (development tooling), Node.js (backend), and Electron (desktop environment). This project serves as a template for developers looking to build modern desktop applications with a lightweight backend.
- Host: GitHub
- URL: https://github.com/rahil1202/electron-react-vite-template
- Owner: rahil1202
- License: mit
- Created: 2025-01-01T14:14:07.000Z (11 days ago)
- Default Branch: master
- Last Pushed: 2025-01-01T14:22:08.000Z (11 days ago)
- Last Synced: 2025-01-01T15:25:07.854Z (11 days ago)
- Topics: electron, electronjs, full-stack-application, nodejs, reactjs, template, vite, vite-plugin
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# React + Vite + Node.js Backend + Electron
A complete setup for building a cross-platform desktop application using React (frontend), Vite (development tooling), Node.js (backend), and Electron (desktop environment). This project serves as a template for developers looking to build modern desktop applications with a lightweight backend.
---
## Features
- **Frontend**: React powered by Vite for fast builds and development.
- **Backend**: Node.js with Express and ES6+.
- **Electron**: Cross-platform desktop application framework.
- **Integrated Workflow**:
- Single command to run frontend, backend, and Electron together.
- Easy packaging for production with `electron-builder`.
---
## Getting Started
### Prerequisites
- **Node.js**: Install from [Node.js website](https://nodejs.org/).
---
### Installation
1. Clone the repository:
```bash
git clone https://github.com/rahil1202/react-electron-vite-template.git
cd react-electron-vite-template
```
2. Install dependencies:
```bash
npm install
cd frontend && npm install
cd backend && npm install
```
---
### Development
To run the project in development mode:
Go to root directory
```bash
npm run dev
```
This will:
- Start the **React frontend** (`http://localhost:5173`).
- Start the **Node.js backend** (`http://localhost:4000`).
- Launch the **Electron desktop application**.
---
### Build for Production
1. Build the React frontend:
```bash
npm run build
```
2. Package the app for distribution:
```bash
npm run electron-builder
```
3. The packaged app will be available in the `dist/` directory.
---
### Project Structure
```plaintext
project/
├── backend/ # Node.js backend
│ ├── src/ # Backend source code
│ └── package.json # Backend dependencies
│
├── frontend/ # React frontend (with Vite)
│ ├── src/ # React source code
│ └── package.json # Frontend dependencies
│
├── electron/ # Electron main and preload scripts
│ ├── main.js # Main process
│ └── preload.js # Preload script
│
├── package.json # Root dependencies for Electron
└── README.md # Project documentation
```
---
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## Author
- GitHub: [rahil1202](https://github.com/rahil1202)
- Email: