Electron-FastAPI-Vue-Element-Plus

This repository provides a boilerplate to integrate Electron, FastAPI, Vue, and Element Plus. The example code in this repository demonstrates opening a folder, passing the file path to FastAPI backend via HTTP, FastAPI reading the files information in the directory, and then returning it to the frontend. The frontend uses Vue and Element Plus UI to display the information.

Features

Electron: Build cross-platform desktop applications with web technologies
FastAPI: A modern, fast (high-performance), web framework for building APIs with Python
Vue: A progressive JavaScript framework for building user interfaces
Element Plus: A Vue 3.0 UI library that helps to create modern web applications

Prerequisites

Node.js installed
Python installed

Getting Started

Clone this repository

git clone https://github.com/your-username/electron-fastapi-vue-element-plus.git

Install dependencies for the Vue, Element Plus

cd src/frontend
npm install

Install dependencies for the FastAPI

cd src/backend
pip install -r requirements.txt

Install dependencies for the Electron from the root of this project

npm install

Run the development mode from the root of this project

npm run dev

Build the distribution from the root of this project

npm run build

Repo Structure

  ├─┬ scripts         
  │ ├─┬ private      
  │ │ └── tsc.js          script for compile typescript
  │ ├── build.js          script for build
  │ └── dev-server.js     script for dev-server
  │
  ├─┬ src
  │ ├── backend           fastapi + uvicorn
  │ ├── electron          electron
  │ └── frontend          vue + element plus + vite
  │
  ├── package.json
  └── electron-builder.json

Credits

The scripts source code in this project is borrowed from Deluze/electron-vue-template.

License

This project is licensed under the MIT License - see the LICENSE file for details.