https://github.com/guoyunhe/vite-integration
Chrome/Edge/Firefox extension to integrate old-school backend with Vite dev server
https://github.com/guoyunhe/vite-integration
Last synced: 3 months ago
JSON representation
Chrome/Edge/Firefox extension to integrate old-school backend with Vite dev server
- Host: GitHub
- URL: https://github.com/guoyunhe/vite-integration
- Owner: guoyunhe
- License: gpl-3.0
- Created: 2023-02-21T07:06:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-21T14:35:33.000Z (over 2 years ago)
- Last Synced: 2025-01-10T17:39:32.235Z (5 months ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Integration (Vite Plugin + Browser Extension)
Integrate old-school backend with Vite dev server.
## Who need it
It is ONLY needed when:
- your back-end generate HTML and inject important stuff (header, footer, sidebar, data);
- and your back-end doesn't have Vite integration ability.
## How it works
1. **Vite Plugin** tell **Browser Extension** what page and asset URL should be replaced
2. **Browser Extension** match page URL and replace specific assets with Vite dev server assets
## Install extension
Go to Chrome web store or Firefox addon...
## Configure your Vite project
Install vite plugin:
```
npm install vite-plugin-integration
```
```ts
// vite.config.ts
import { UserConfig } from 'vite'
import integration from 'vite-plugin-integration';
const config: UserConfig = {
plugins: [integration({
replaceAssets: [
'/assets/*.css',
'/assets/*.js'
]
})],
server: {
port: 3333, // must between 3000 and 4000
}
};
export default config;
```