Rails generator install is broken when trying to use it on a newly generated Rails 8 app

[Andy9822]

I created a brand new Rails app using the Rails 8 app generator to see how easily Inertia could be added to an existing and recent project using the Inertia's Rails generator.

To my surprise, it just didn't work out of the box. (and I still haven't been able to make it work)

🛠️ Setup

Im sticking to defaults, I just created a Rails app with rails new jurisflow --database=postgresql --javascript=esbuild --css=tailwind --skip-jbuilder --skip-action-mailbox --skip-action-text --skip-hotwire --skip-test. Nothing else and nothing more.

❌ First issue: incorrect Procfile.dev was generated

I ran the Inertia Rails generator install tool: bin/rails generate inertia:install --framework=react --typescript --vite

Output of the command

~Check that your vite.json configuration file is available in the load path:~

	No such file or directory @ rb_sysopen - /Users/andy/AndyDev/jurisflow/config/vite.json

Installing Inertia's Rails adapter
Could not find a Vite configuration files (`config/vite.json` & `vite.config.{ts,js,mjs,cjs,mts,cts}`).
         run  bundle add vite_rails from "."
Vite Rails gem successfully installed
         run  bundle exec vite install from "."
Vite Rails successfully installed
Adding TypeScript support
         run  yarn add @types/react @types/react-dom typescript --silent from "."
Copying adding scripts to package.json
         run  npm pkg set scripts.check="tsc -p tsconfig.app.json && tsc -p tsconfig.node.json" from "."
Would you like to install Tailwind CSS? (y/n) y
Installing Tailwind CSS
         run  yarn add tailwindcss @tailwindcss/vite @tailwindcss/forms @tailwindcss/typography --silent from "."
warning Pattern ["tailwindcss@^4.1.3"] is trying to unpack in the same destination "/Users/andy/Library/Caches/Yarn/v6/npm-tailwindcss-4.1.3-f5a6b4451295c06e213013697f7193be1630fa46-integrity/node_modules/tailwindcss" as pattern ["tailwindcss@4.1.3","tailwindcss@4.1.3","tailwindcss@4.1.3"]. This could result in non-deterministic behavior, skipping.
     prepend  vite.config.mts
      insert  vite.config.mts
      create  app/frontend/entrypoints/application.css
Adding Tailwind CSS to the application layout
      insert  app/views/layouts/application.html.erb
Adding Inertia's Rails adapter initializer
      create  config/initializers/inertia_rails.rb
Installing Inertia npm packages
         run  yarn add @inertiajs/react@latest @vitejs/plugin-react react react-dom --silent from "."
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
Adding Vite plugin for react
      insert  vite.config.mts
     prepend  vite.config.mts
Copying inertia.ts entrypoint
      create  app/frontend/entrypoints/inertia.ts
Adding inertia.ts script tag to the application layout
      insert  app/views/layouts/application.html.erb
Adding Vite React Refresh tag to the application layout
      insert  app/views/layouts/application.html.erb
        gsub  app/views/layouts/application.html.erb
Copying example Inertia controller
      create  app/controllers/inertia_example_controller.rb
Adding a route for the example Inertia controller
       route  get 'inertia-example', to: 'inertia_example#index'
Copying page assets
      create  app/frontend/pages/InertiaExample.module.css
      create  app/frontend/assets/react.svg
      create  app/frontend/assets/inertia.svg
      create  app/frontend/assets/vite_ruby.svg
      create  app/frontend/pages/InertiaExample.tsx
      create  tsconfig.json
      create  tsconfig.app.json
      create  tsconfig.node.json
      create  app/frontend/vite-env.d.ts
Copying bin/dev
    conflict  bin/dev
Overwrite /Users/andy/AndyDev/jurisflow/bin/dev? (enter "h" for help) [Ynaqdhm] Y
       force  bin/dev

To my surprise, after trying to boot up the Rails app through bin/dev multiple times and failing due to "service already using the same port", I checked Procfile.dev and this is what I got:

web: env RUBY_DEBUG_OPEN=true bin/rails server
js: yarn build --watch
css: yarn build:css --watch
vite: bin/vite dev
web: bin/rails s

It looks like the conflict and overwrite of bin/dev after I typed Y in the console didn't merge well Procfile.dev and ended up with a duplicated web service (?). Just a guess.

Edit:

it's actuallyvite_rails' fault: ElMassimo/vite_ruby#541

❌ Second issue: inertia-example route can't load all assets

After fixing the Procfile.dev, I was able to run the app 🎉.
However, navigating to http://localhost:3000/inertia-example resulted in a blank page.

In the browser dev tools, I saw some requests failed:

• inertia.ts
• application.css
• tailwindcss

edit:

I just noticed vite-dev connection is logging an error each 1s:

[Andy9822]

The first thing I was able to spot was:

The applications.js was created in app/javascript/endpoints. On the other hand, inertia.js was created in app/frontend/entrypoints.

And Vite seems to be serving the former, hence why both applications.css and inertia.ts couldn't be fetched

[jer-k]

I wonder if this has something to do with Tailwind (probably not) or --javascript=esbuild? I also created a demo rails app today and I everything worked fine for me.

I basically did

• rails new inertia-setup --database=postgresql.
• Added vite_rails to Gemfile and ran bundle exec vite install
• Added inertia_rails to Gemfile and ran rails generate inertia:install

My files compared to what you mentioned

Procfile:

vite: bin/vite dev
web: bin/rails s

I don't have an app/frontend directory. Both application.js and inertia.js are in app/javascript/entrypoints/

[Andy9822]

I wonder if this has something to do with Tailwind (probably not) or --javascript=esbuild? I also created a demo rails app today and I everything worked fine for me.

Hmm, the esbuild for the Javascript flag may be in the right direction tbh, I will create a new rails app from scratch later without all the flags I originally passed

Now, about the weird app/frontend directory that rails generator created and put some files into:

I don't have an app/frontend directory. Both application.js and inertia.js are in app/javascript/entrypoints/

Notice how in my logs from the Inertia install generator it mentions twice performing operations on this weird app/frontend directory

Copying inertia.ts entrypoint
      create  app/frontend/entrypoints/inertia.ts
...
    
Copying page assets
      create  app/frontend/pages/InertiaExample.module.css
      create  app/frontend/assets/react.svg
      create  app/frontend/assets/inertia.svg
      create  app/frontend/assets/vite_ruby.svg
      create  app/frontend/pages/InertiaExample.tsx
      create  tsconfig.json
      create  tsconfig.app.json
      create  tsconfig.node.json
      create  app/frontend/vite-env.d.ts

[skryukov]

Our generators only support vite ruby atm.

[Andy9822]

I think there's some "race condition" or a flaky check that sometimes passes/fails in the generator.
I ran bin/rails generate inertia:install 5 times and on the 5th attempt it finally generated the app "right" AKA inside the app/javascript without any weird app/frontend directory

The generator class indeed has app/frontend as a possible output for the generated files. HOWEVER, it'll only use it in case ViteRuby is not defined.

inertia-rails/lib/generators/inertia/install/helpers.rb

Lines 4 to 16 in d1b3c2f

	module Generators
	module Helpers
	### FS Helpers
	def js_destination_path
	return ViteRuby.config.source_code_dir if defined?(ViteRuby)
	if file?('config/vite.json')
	source_code_dir = JSON.parse(File.read(file_path('config/vite.json'))).dig('all', 'sourceCodeDir')
	return source_code_dir if source_code_dir
	end
	'app/frontend'
	end

and this is where I think there may be some "race condition" flaky behavior:

• bin/rails generate inertia:install under the hood installs vite_rails and creates a vite.config.mts file
• both these things are checked by Generators::Helpers
• however, it still will hit the fallback app/frontend in some runs of the generator

[Andy9822]

Our generators only support vite ruby atm.

sorry, not sure I got your point or what I did that didn't match what you'd expect 🤔

• I created a new Rails project
• I ran bundle add inertia_rails
• Then I ran bin/rails generate inertia:install

Everything is based on the official docs at https://inertia-rails.dev/guide/server-side-setup
As I pointed out in my comment above, sometimes it works, and sometimes it generates in the wrong directory.

[skryukov]

it finally generated the app "right" AKA inside the app/javascript without any weird app/frontend directory

app/frontend is not a weird directory it's a default for Ruby Vite: https://vite-ruby.netlify.app/config/#sourcecodedir

[skryukov]

OK, so here's what I see. @Andy9822, you created a Rails project using esbuild, but installation generator doesn't support esbuild—only Vite Ruby. We should consider adding an early check for the jsbundling-rails gem (or simply checking if the project has a package.json without Ruby Vite installed) in the generator to raise an error early. Currently, the generator just installs Ruby Vite on top of the esbuild setup, which leads to conflicts—that's the main issue here.

To resolve this, you should create the Rails project without the JavaScript pipeline (i.e., using --skip-js). Additionally, I recommend omitting the --css=tailwind option since the Inertia installation generator will create a JavaScript-powered setup for Tailwind.

Note: I'm considering adding esbuild support to the installation generator to support Inertia installation for existing projects that already use esbuild. However, this is not a priority at the moment, as esbuild users can follow the manual installation steps outlined in the documentation.

[Andy9822]

it finally generated the app "right" AKA inside the app/javascript without any weird app/frontend directory

app/frontend is not a weird directory it's a default for Ruby Vite: https://vite-ruby.netlify.app/config/#sourcecodedir

I was just checking the vite_rails repo and wondering if maybe they are the ones to blame for this issue 🤔

It's super weird that some runs of bin/rails generate inertia:install simplywork and others don't. I just checked all related generators from this project and it's either something flakymess check OR indeed vite_rails with an internal bug that points things to the wrong place sometimes. Then, intertia generator just sticks to what the other gem set up.

[Andy9822]

Update:

The first problem reported on this issue is actually vite_rails' fault, I just reported it in their repo and opened a suggested PR to fix it

[Andy9822]

OK, so here's what I see. @Andy9822, you created a Rails project using esbuild, but installation generator doesn't support esbuild—only Vite Ruby. We should consider adding an early check for the jsbundling-rails gem (or simply checking if the project has a package.json without Ruby Vite installed) in the generator to raise an error early. Currently, the generator just installs Ruby Vite on top of the esbuild setup, which leads to conflicts—that's the main issue here.

To resolve this, you should create the Rails project without the JavaScript pipeline (i.e., using --skip-js). Additionally, I recommend omitting the --css=tailwind option since the Inertia installation generator will create a JavaScript-powered setup for Tailwind.

Note: I'm considering adding esbuild support to the installation generator to support Inertia installation for existing projects that already use esbuild. However, this is not a priority at the moment, as esbuild users can follow the manual installation steps outlined in the documentation.

hmmm, that would make sense.
However, how does that explain that sometimes the intertia:install generator works and some other times it doesn't? 🤔
I haven't changed my Rails app, so it's both failing and succeeding with the esbuild thing

[rs1052]

For problem 2, following this guide fixed the issue. The command was rails new inertia_rails_example --skip-js --skip-asset-pipeline, which placed everything in app/frontend/entrypoints so it could be found, and didn't contain a app/javascript folder.

[bigmasonwang]

I just noticed vite-dev connection is logging an error each 1s:
net::ERR_CONNECTION_REFUSED

Add dev host to vite.json can solve the issue, it's about HMR, failed to connect to Vite dev server

{
  ...
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036,
    "host": "127.0.0.1"
  },
  ...
}

[bknoles]

Closing based on the comment here:

#216 (comment)