Vite Auto Origin

This plugin for Vite aims to set the 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 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

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

Usage

vite.config.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. 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 implements the server-side integration of vite and TYPO3.