How can I make HMR work with docker compose?

[franciscoj]

I have a new fresh rails application in which I want to use vite to build the frontend. I'm trying to get vite_rails to work with docker compose.

I followed the installation instructions and when I run bin/rails server and bin/vite dev on my host machine, it works as expected.

However, when I do it from my docker-compose setup, the rails middleware behaves as if vite development server wasn't running.

My findings so far are that this line:

vite_ruby/vite_ruby/lib/vite_ruby.rb

Line 94 in 436268b

Socket.tcp(config.host, config.port, connect_timeout: config.dev_server_connect_timeout).close

raises an exception informing that the other end has refused to connect. That makes me think that I need some extra configuration for this to work.

I've tried:

1. Setting VITE_RUBY_HOST to vite on the rails container so that it uses that hostname instead of localhost. That didn't work.
2. Setting vite as the hostname on vite.config.ts. That didn't work either.
3. Spanning a console inside of docker and trying to connect with Socket.tcp(...)

What I think is happening is that I'm somehow not getting visibility of the websocket connection to the vite container from the rails container.

Not sure if there's any other port or configuration I might need or if there might be a better and easier way to do this.

Any help is more than welcome :)

I've created a test application repo https://github.com/franciscoj/vite_example just in case anyone else wants to give it a look to help me find the solution, just clone and docker-compose up.

I'll be more than happy to help with a PR if any fix or improvement is needed for this to work :)

Thanks a lot for vite_rails!

[ElMassimo]

Hi there!

Forked your example, please take a look at https://github.com/ElMassimo/vite_rails_docker_example.

The missing piece is setting VITE_RUBY_HOST to 0.0.0.0 in the Vite service, so that the process can receive external requests.
Otherwise, the service will not be reachable by the Rails service.

Setting hmr.host to vite causes a browser running in the host to attempt communicating with http://vite:3036, which does not exist. Removing the hmr option from vite.config.ts does the trick.

I don't use Docker in development, someone else might be able to provide a better setup 😃

[franciscoj]

Thanks a lot! That solved it perfectly!

I had the hmr options there as well because I was a bit lost and honestly didn't know what else to test 😅

If I can help with a PR documenting it just let me know :)

[ElMassimo]

Happy to hear that it worked 😃

That's a good suggestion, added a Docker section to the docs pointing to the example.