Docker in development: Rails not connecting to the Vite dev server

[markhermano]

Hi Guys,

I'm using Ruby 3.0.0 with Rails 7.0.3.

bin/vite present?: true
vite_ruby: 3.2.0
vite_rails: 3.0.10
rails: 7.0.3
node: v14.19.0
npm: 6.14.16
yarn: 
pnpm:
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-linux-musl]

installed packages:
[email protected] /var/app
├── [email protected]
└── [email protected]

Here my vite.json.

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

And my vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue()
  ],
  emptyOutDir: true,
  server: {
    host: '0.0.0.0'
  }
})

I'm running the app through docker-compose and it gives me this result

vue_1    | Environment: development
vue_1    | The Gemfile's dependencies are satisfied
vue_1    |
vue_1    |   VITE v3.0.2  ready in 3597 ms
vue_1    |
vue_1    |   ➜  Local:   http://localhost:3036/vite-dev/
app_1    | => Booting Puma
app_1    | => Rails 7.0.3 application starting in development
app_1    | => Run `bin/rails server --help` for more startup options
app_1    | Puma starting in single mode...
app_1    | * Puma version: 5.6.4 (ruby 3.0.0-p0) ("Birdie's Version")
app_1    | *  Min threads: 5
app_1    | *  Max threads: 5
app_1    | *  Environment: development
app_1    | *          PID: 9
app_1    | * Listening on http://0.0.0.0:3000
app_1    | Use Ctrl-C to stop

But when I access http:// localhost:3036/vite-dev/, I'm getting an HTTP ERROR 404 from browser.
And when I checked rails console and ran the command below I get true as a result.

irb(main):005:0> ViteRuby.instance.dev_server_running?
=> true

I'm not sure why there's no instance running. But when I ran http://localhost:3000, it ran a build on my vue app and works fine.
Any ideas on how I can make the dev server running? I've been stuck for some time on this 😵‍💫.

[ElMassimo]

Hi Marc!

For a full docker setup, see this article.

For a smaller proof-of-concept setup, see this example.

[markhermano]

Thanks for the references @ElMassimo. I read a similar discussion here #131 and you said this You should not visit the Vite dev server, in Vite Ruby projects it's only used to serve assets. Visit the Rails server instead.

So basically my problem now is to make the HMR work. I've gone to the references and pretty much followed the settings there but still I can't make vite detect changes on save. 🤔

[ElMassimo]

It's important to differentiate between:

• Vite does not detect changes to local files.
• Rails is not using the Vite dev server.

In the first scenario, it might be that the docker image is configured incorrectly, and the files are baked in the image, instead of being mounted so that you can modify them in the host machine (your local), and have those changes be reflected on the running container.

In the second scenario, it could be related to a host/port configuration, where the rails service can not reach the vite service at the specified host and port. See this related discussion.

It's always better to start from a working configuration, as it's very easy to configure things incorrectly 😄

[markhermano]

Although I found a somewhat hacky way to have vite dev server detect my changes with this setting:

// vite.config.js
server: {
  watch: {
    usePolling: true
  }
}

I believe your suggestion to start from a working configuration is a better decision.
Thanks 👍