https://github.com/s2b/vite-plugin-auto-origin

Vite plugin that configures origin url for dev server automatically
https://github.com/s2b/vite-plugin-auto-origin

vite vite-plugin

Last synced: about 2 months ago
JSON representation

Vite plugin that configures origin url for dev server automatically

• Host: GitHub
• URL: https://github.com/s2b/vite-plugin-auto-origin
• Owner: s2b
• License: mit
• Created: 2023-10-06T20:05:29.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T17:53:54.000Z (2 months ago)
• Last Synced: 2024-07-18T22:39:19.249Z (about 2 months ago)
• Topics: vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-auto-origin - Detect origin configuration automatically based on incoming requests to dev server. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-origin - Detect origin configuration automatically based on incoming requests to dev server. (Plugins / Framework-agnostic Plugins)

README

        
# Vite Auto Origin

This plugin for [Vite](https://vitejs.dev/) aims to set the

[server.origin](https://vitejs.dev/config/server-options.html#server-origin)

configuration option automatically to the external URL of the vite dev server.

The server.origin option is required to be set to the Vite dev server url in

[backend integration](https://vitejs.dev/guide/backend-integration.html#backend-integration) scenarios,

so that assets (e. g. referenced images or font files) are not tried to be loaded from the backend URL,

but from the dev server url.

When your CSS references a font file, and CSS is loaded via dev server and HMR,

by default vite uses the path to the font file on the vite dev server without scheme or protocol

(e.g. `/url/to/dev/font.woff`). This isn't an issue, when using Vite as backend for your JS app,

but will not work, when accessing your project with the backend url and only adding the dev server JS and CSS,

as your browser would try to load `https:/backend.tld/url/to/dev/font.woff` instead of `http://127.0.0.1:8080/url/to/dev/font.woff`.

This is exactly what `server.origin` is for and you could set it manually in your

`vite.config.js`.

With this plugin enabled however, this option is set automatically, even in more complex scenarios, where your Vite dev server

is reached by the browser through a proxy.

## Installation

```sh

npm install --save-dev vite-plugin-auto-origin

```

## Usage

vite.config.js:

```js

import autoOrigin from "vite-plugin-auto-origin";

export default defineConfig({

    plugins: [autoOrigin()],

    // ...

});

```

## Use case: TYPO3

This plugin was created to allow easier integration of vite with

[TYPO3 CMS](https://typo3.org/). In TYPO3 setups, the original asset sources

are usually located in `Resources/Private/`, which isn't served by the web server,

and only assets generated by `vite build` will be created in `public/_assets/vite/`

and thus will be publicly available. This is why the vite dev server needs to

serve the asset files in development context.

**[vite_asset_collector](https://github.com/s2b/vite-asset-collector)** implements

the server-side integration of vite and TYPO3.