Configure vite HMR host from vite.json development.host

[grk]

Description 📖

Adjust vite configuration to set HMR host and port.

Background 📜

When running an app that uses multiple subdomains, I was running into an issue where I wanted to run vite listening on localhost, and having app loaded from sub1.app.test and sub2.app.test use vite HMR at localhost:3036. I configured development.host in vite.json which correctly set ViteRuby.config.host_with_port to localhost:3036, but vite client in the browser was trying to connect to sub1.app.test:3036, violating CSP.

The Fix 🔨

This change configures the vite client to use the same HMR config as what we're setting on the server side.

Screenshots 📷

[ElMassimo]

Hi Grzesiek! Thanks for your contribution!

I'll make some adjustments to ensure the hmr option can still be overriden manually in vite.config.ts, but this is a good default.

[ElMassimo]

Released in vite-plugin-ruby@3.0.1.

[grk]

Thanks!

[RichGuk]

@ElMassimo, Is it possible to document this somewhere. I had a slightly different but related problem. I ended up digging through the code to find this change. I think this will always use the Vite Ruby host config.

So the problem I had was with a docker configuration. With VITE_RUBY_HOST set to 0.0.0.0, the client always loads the WebSocket via 0.0.0.0:3036, which breaks when trying to access the Rails server from another machine (i.e via "test.dev:3000" or "192.168.0.40:3000", for example).

In the end, I had to add this to vite.config.ts to make Vite fallback to working out the hostname automatically.

{
  server {
    hmr: {
      host: undefined,
    }
  }
}

This may be worth mentioning somewhere to save someone else trouble.

[ElMassimo]

@RichGuk A docker setup like the one you describe might be more common than testing apps locally using subdomains, and is potentially harder to debug.

I'm considering reverting this change, which would require explicit configuration of server.hmr.host to localhost when using subdomains. Before making any changes, I would like to hear your thoughts @grk

{
  server {
    hmr: {
      host: 'localhost',
    }
  }
}

We could then add a section in Troubleshooting that suggests this configuration when testing subdomains, which should make it easy to find.

[rbngzlv]

Hi, I was setting Vite in a new project using docker (so VITE_RUBY_HOST is set to 0.0.0.0) and I couldn't find the reason why it didn't work until I tried to upgrade another project from Vite 2.x to 3.x., and then I found this change when digging in the commits related to Vite 3.x to find the cause.

@ElMassimo I agree with your previous comment, because I think that this change breaks the more simple or common setups.

@RichGuk thanks for take the time to post a comment with your findings.

EDIT: and thanks for this nice gem!

[ElMassimo]

@grk Reverting this change, since Docker setups are more common than testing subdomains locally.

I might release it in a patch version, since it doesn't affect production usage, and will add a note in the Troubleshooting section about subdomains.

Please leave any feedback you have around this issue.

[ElMassimo]

@RichGuk @rbngzlv Released vite-plugin-ruby@3.0.8 which reverts this PR.

This should simplify the setup with Docker and similar setups that require listening on 0.0.0.0. Please upgrade, and let me know how it goes.

[rbngzlv]

@ElMassimo upgraded a project from 2.x to 3.0.8 and worked fine, thanks!

[uzaif313]

@ElMassimo without action cable in rails application is it possible to run HMR

[uzaif313]

@ElMassimo its throws below error

my rails application doesnot contain action cable

[ElMassimo]

@uzaif313 That's unrelated to this issue, please open a Discussion instead.

You need to configure CSP in your application.