(Backend integration) `server.origin` pointing to Vite's dev server

[amitdahan]

Describe the bug

Hi guys!

I'm working on integrating Vite for developing assets that would be loaded (both locally and when deployed) on a custom, separate backend.

After reading https://vitejs.dev/guide/backend-integration.html our setup is almost complete. We're left with one issue during local development.

We'll load what's necessary in our custom HTML using absolute URLs to Vite's local dev server, for example:

• http://localhost:5173/@vite/client
• http://localhost:5173/main.js

This works great, until some entrypoint tries to load some non-js asset. When working directly with Vite's dev server - everything is relative to the origin, so it just works.

In our case - we found that configuring server.origin with Vite's dev server URL works great.

While this works, we now have to know Vite's dev server URL in config-time, which means we have to also configure server.port, thus giving-up on the built-in available-port getter.

While this isn't too bad, I hoped to find a way to set server.origin to Vite's dev server, while also maintaining its defaults for server port, along with the port-taken behavior.

Proposed solution

While I understand why assets are loaded relative to origin by default, maybe to help with the above, a "server.origin": "absolute" configuration can be accepted? (or server.absoluteOrigin: true? server.relativeOrigin: false? obviously open for more API ideas)

If this sounds good I can contribute this.

Reproduction

https://stackblitz.com/edit/vitejs-vite-m6xtbc

Steps to reproduce

1. yarn
2. yarn dev and yarn custom-backend in split terminals
3. Access http://localhost:8000

Both images aren't rendered.

4. Uncomment origin line in vite.config.js

Images are rendered correctly.

System Info

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vite: ^4.2.0 => 4.2.1

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-m6xtbc (Open reproduction)

[pySilver]

I was also surprised that server.origin is not dynamically constructed (or at least there is no way to do it)

[s2b]

I would also appreciate if origin could be specified in a more dynamic way. I don't know the technical details inside vite, but maybe one of these approaches would be possible?

• ability to specify origin when embedding the vite client: <script type="module" src="http://localhost:5173/@vite/client?origin=http://localhost:5173"></script> (this would be my favorite)
• set origin to dev server uri automatically if origin: true (or similar) is set in vite config file
• ability to specify origin via CLI: vite dev --origin http://localhost:5173

All variants would make the integration of vite in external backends much easier.

[s2b]

I don't know if this is helpful to anyone else, but I created a vite plugin that more or less covers my use case:

https://www.npmjs.com/package/vite-plugin-auto-origin

The plugin tries to extract the protocol/host/port from the last request to the vite dev server and uses that value as server.origin. I think that there might be timing issues if you use multiple domains in parallel, but for normal usage this seems to work just fine. Let me know if this helps you in any way or if there is a missing feature you'd like to add.

[tietoevry-johan]

@s2b Nice work. Besides the downside of a hardcoded url to the dev server, are there any other reasons to use your plugin over just setting server.origin?

[s2b]

@tietoevry-johan The main reason for this plugin is that the server uri might be different in various environments:

• port is taken
• vite server behind reverse proxy (e. g. in local docker setups)
• preferences of developers (local server vs. server behind proxy)

So yes, you could specify it manually and it would do the same thing, but you would have to adjust it sometimes.

[sapphi-red]

we now have to know Vite's dev server URL in config-time, which means we have to also configure server.port, thus giving-up on the built-in available-port getter.

Isn't this true even if Vite generated server.origin automatically? Won't you need to set the port value in the <script type="module" src="" /> and turn on strictPort: true?

(I agree that it would be a bit easier if Vite generated server.origin automatically.)