Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brandon689/wpfvitereacthost
WPF React Desktop App
https://github.com/brandon689/wpfvitereacthost
css electron html native react webview2 wpf
Last synced: 27 days ago
JSON representation
WPF React Desktop App
- Host: GitHub
- URL: https://github.com/brandon689/wpfvitereacthost
- Owner: Brandon689
- License: mit
- Created: 2024-07-31T11:55:34.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-07-31T12:57:59.000Z (3 months ago)
- Last Synced: 2024-10-10T14:04:30.682Z (27 days ago)
- Topics: css, electron, html, native, react, webview2, wpf
- Language: C#
- Homepage:
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# WPF Vite React Host
This project demonstrates how to host a Vite-built React application within a WPF application using WebView2. ASP.NET is not required, there is just an ASP Core project to show how you can use an API.
## VS Electron
- Only 40mb of memory instead of around 100mb.
- WebView2 uses Edge, which is chromium based, so its similar to Electron.
- Not cross platform, Edge dependency. Could use CEFSharp instead.
# How to dev
- Run the vite app with pnpm run dev as you would normally and view it in browser
- Run the ASP server if you're using it, you can delete it if not using
- In production, follows steps 2 and 3 of getting started below and run the WPF app.
- Its more convenient to use the normal browser in development.
## Features
- WPF application serving as a host for a React app
- React app built with Vite for fast development and optimized production builds
- WebView2 integration for rendering the React app within WPF
- Example of fetching data from an ASP.NET Core Web API
## Prerequisites
- .NET Framework or .NET Core (version used in the project)
- Node.js and npm (for React development)
- WebView2 Runtime
## Getting Started
1. Clone the repository
2. Navigate to the React app directory and run:
```sh
pnpm install
pnpm run build
```
3. Copy all the files in dist into the ReactApp folder. Set each file to copy to ouput directory, copy if newer in Visual Studio.
## How It Works
The WPF application uses WebView2 to load the React application. The React app is built and its output is placed in a directory that the WPF app can access. WebView2 is configured to use a virtual host, allowing the React app to make API calls without CORS issues.