Need help configuring vite with a rails application that lives in a nested path.

[ravi-bhusal-mg]

So I have my application that lives in a https://example.com/myapp.

I am using sprockets and vite together and this is my application.rb

config.action_controller.relative_url_root = "/myapp"
config.assets.prefix = '/myapp/assets/'

and my vite.json and vite.config.mts are as follows

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

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    RubyPlugin(),
  ],
  base: '/myapp/',
})

With the above config, when doing bundle exec vite build --clear --mode=development I can generate the assets under public/myapp/vite directory, however the application itself can't find the client or compiled application.js.

What am I doing wrong here? I cannot have the asset under public/vite as the application itself lives in a nested path.

[ravi-bhusal-mg]

So the following config works for vite.

vite.json

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

vite.config

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    RubyPlugin(),
  ],
  base: '',
})