Skip to content

Allow custom domains in Vite's allowedHosts #51395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanclark merged 2 commits into from
Jan 23, 2025
Merged

Allow custom domains in Vite's allowedHosts #51395

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b8274d
Allow custom domains in Vite's allowedHosts
ryanclark Jan 23, 2025
0e8e356
Allow both VITE_HOST and the target to be allowedHosts
ryanclark Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions web/packages/build/vite/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,10 @@ export function createViteConfig(
}
}

const targetHostname =
target !== DEFAULT_PROXY_TARGET
? new URL(`http://${target}`).hostname
: undefined;

const config: UserConfig = {
clearScreen: false,
server: {
allowedHosts: targetHostname ? [`.${targetHostname}`] : [],
allowedHosts: resolveAllowedHosts(target),
fs: {
allow: [rootDirectory, '.'],
},
Expand Down Expand Up @@ -172,6 +167,7 @@ export function createViteConfig(
secure: false,
},
};

if (process.env.VITE_HTTPS_KEY && process.env.VITE_HTTPS_CERT) {
config.server.https = {
key: readFileSync(process.env.VITE_HTTPS_KEY),
Expand Down Expand Up @@ -200,6 +196,24 @@ export function createViteConfig(
});
}

function resolveAllowedHosts(target: string) {
const allowedHosts = new Set<string>();

if (process.env.VITE_HOST) {
const { hostname } = new URL(`https://${process.env.VITE_HOST}`);

allowedHosts.add(hostname);
}

if (target !== DEFAULT_PROXY_TARGET) {
const { hostname } = new URL(`https://${target}`);

allowedHosts.add(hostname);
}

return Array.from(allowedHosts);
}
Copy link
Copy Markdown
Member

@ravicious ravicious Jan 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be something like this to allow target and VITE_HOST at the same time because why not.

function resolveAllowedHost(target: string) {
  const allowedHosts = [];
  if (process.env.VITE_HOST) {
    allowedHosts.push(process.env.VITE_HOST);
  }

  if (target !== DEFAULT_PROXY_TARGET) {
    const { hostname } = new URL(`http://${target}`);

    allowedHosts.push(hostname);
  }

  return allowedHosts;
}

I guess it all comes down to which domains you have in the cert that Vite uses? But I noticed that the docs say "When using HTTPS, this check is skipped" and that is true, but the thing that falls apart without allowedHosts is websockets (and thus HMR).

Copy link
Copy Markdown
Member Author

@ryanclark ryanclark Jan 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think if your cert accepts localhost it'll still work without setting allowedHosts - but first Vite will try the hostname you're using, so there will be one error in the console always, but HMR would still work

I think your suggestion is good, I'll add it


function resolveTargetURL(url: string) {
if (!url) {
return;
Expand Down