Simplify installation by providing tailwind & vite installation steps

.github/workflows/main.yml

@@ -8,20 +8,53 @@ on:
  pull_request:
 
 jobs:
+ lint:
+ runs-on: ubuntu-latest
+ name: Linter
+ env:
+ BUNDLE_JOBS: 4
+ BUNDLE_RETRY: 3
+ steps:
+ - uses: actions/checkout@v3
+ - name: Set up Ruby
+ uses: ruby/setup-ruby@v1
+ with:
+ ruby-version: "3.3"
+ bundler: latest
+ bundler-cache: true
+ - name: Run StandardRB
+ run: bundle exec standardrb
+
  build:
  runs-on: ubuntu-latest
  name: Ruby ${{ matrix.ruby }}
+ env:
+ BUNDLE_JOBS: 4
+ BUNDLE_RETRY: 3
  strategy:
  matrix:
  ruby:
- - '3.2.3'
+ - "3.3"
+ - "3.2"
+ - "3.1"
+ - "3.0"
 
  steps:
- - uses: actions/checkout@v4
- - name: Set up Ruby
- uses: ruby/setup-ruby@v1
- with:
- ruby-version: ${{ matrix.ruby }}
- bundler-cache: true
- - name: Run the default task
- run: bundle exec rake
+ - uses: actions/checkout@v4
+ - name: Set up Ruby
+ uses: ruby/setup-ruby@v1
+ with:
+ ruby-version: ${{ matrix.ruby }}
+ bundler-cache: true
+ bundler: latest
+ - uses: oven-sh/setup-bun@v2
+ with:
+ bun-version: latest
+ - name: Set Node.js 20.x
+ uses: actions/setup-node@v3
+ with:
+ node-version: 20.x
+ - name: Install yarn
+ run: npm install -g yarn
+ - name: Run tests
+ run: bundle exec rspec

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+Added:
+
+- Improve installation generator ([@skryukov])
+ - option to install Vite Rails gem (`--install-vite`)
+ - option to install Tailwind CSS (`--install-tailwind`)
+ - option to install without interactivity (`--no-interaction` & `--framework=react|vue|svelte`)
+ - option to skip example page generation (`--no-example-page`)
+ - option to choose package manager (`--package-manager=yarn|npm|bun`)
+
 ## [0.1.1] - 2024-06-17
 
 ### Fixed:

Gemfile

@@ -10,3 +10,5 @@ gem "rake", "~> 13.0"
 gem "rspec", "~> 3.0"
 
 gem "standard", "~> 1.3"
+
+gem "generator_spec", "~> 0.10"

README.md

@@ -20,40 +20,7 @@ If bundler is not being used to manage dependencies, install the gem by executin
 
 ### Installation generator
 
-`InertiaRailsContrib` comes with a generator that installs and sets up Inertia in a Rails application. **It requires the [Vite Rails](https://vite-ruby.netlify.app/guide/rails.html) gem to be installed and configured in the application.**
-
-<details>
-<summary>Creating a new Rails application and configuring Vite</summary>
-
-This is actually a simple process. First, create a new Rails application:
-```bash
-rails new myapp --skip-js
-```
-
-Next, install the Vite Rails gem:
-
-```bash
-bundle add vite_rails
-bundle exec vite install
-```
-
-If you use macOS, you may need to edit the `config/vite.rb` file to add the following line:
-
-```json
-{
- "development": {
-+ "host": "127.0.0.1",
- "autoBuild": true,
- "publicOutputDir": "vite-dev",
- "port": 3036
- }
-}
-```
-
-That's it! Vite is now installed and configured in the Rails application. For more information, refer to the [Vite Ruby documentation](https://vite-ruby.netlify.app) and the [Vite-lizing Rails: get live reload and hot replacement with Vite Ruby](https://evilmartians.com/chronicles/vite-lizing-rails-get-live-reload-and-hot-replacement-with-vite-ruby) article.
-
-The next step is to install Inertia!
-</details>
+`InertiaRailsContrib` comes with a generator that installs and sets up Inertia in a Rails application. It automatically detects if the [Vite Rails](https://vite-ruby.netlify.app/guide/rails.html) gem is installed and will attempt to install it if not present.
 
 To install and setup Inertia in a Rails application, execute the following command in the terminal:
 
@@ -62,73 +29,70 @@ bundle add inertia_rails-contrib
 bin/rails generate inertia:install
 ```
 
-This command will ask you for the frontend framework you are using (React, Vue, or Svelte) and will install the necessary dependencies and set up the application to work with Inertia.
+This command will:
+- Check for Vite Rails and install it if not present
+- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask if you want to install Tailwind CSS
+- Install necessary dependencies
+- Set up the application to work with Inertia
+- Copy example Inertia controller and views (can be skipped with the `--skip-example` option)
 
 Example output:
 
 ```bash
 $ bin/rails generate inertia:install
-
 Installing Inertia's Rails adapter
+Could not find a package.json file to install Inertia to.
+Would you like to install Vite Ruby? (y/n) y
+ run bundle add vite_rails from "."
+Vite Rails gem successfully installed
+ run bundle exec vite install from "."
+Vite Rails successfully installed
+Would you like to install Tailwind CSS? (y/n) y
+Installing Tailwind CSS
+ run npm add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries --silent from "."
+ create tailwind.config.js
+ create postcss.config.js
+ 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
 What framework do you want to use with Inertia? [react, vue, svelte] (react)
- run npm add @inertiajs/inertia @inertiajs/react react react-dom from "."
-
-added 6 packages, removed 42 packages, and audited 69 packages in 8s
-
-18 packages are looking for funding
- run `npm fund` for details
-
-2 moderate severity vulnerabilities
-
-Some issues need review, and may require choosing
-a different dependency.
-
-Run `npm audit` for details.
- run npm add --save-dev @vitejs/plugin-react from "."
-
-added 58 packages, and audited 127 packages in 6s
-
-22 packages are looking for funding
- run `npm fund` for details
-
-2 moderate severity vulnerabilities
-
-Some issues need review, and may require choosing
-a different dependency.
-
-Run `npm audit` for details.
+ run npm add @inertiajs/react react react-dom @vitejs/plugin-react --silent from "."
 Adding Vite plugin for react
  insert vite.config.ts
  prepend vite.config.ts
-Add "type": "module", to the package.json file
- gsub package.json
-Copying inertia.js into Vite entrypoints
+Copying inertia.js entrypoint
  create app/frontend/entrypoints/inertia.js
 Adding inertia.js 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 framework related files
+Copying page assets
  create app/frontend/pages/InertiaExample.jsx
+ 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
+Copying bin/dev
+ create bin/dev
 Inertia's Rails adapter successfully installed
 ```
 
 With that done, you can now start the Rails server and the Vite development server (we recommend using [Overmind](https://github.com/DarthSim/overmind)):
 
 ```bash
-overmind start -f Procfile.dev
-# or
-foreman start -f Procfile.dev
+bin/dev
 ```
 
-And navigate to `http://127.0.0.1:5100/inertia-example` to see the example Inertia page.
+And navigate to `http://localhost:3100/inertia-example` to see the example Inertia page.
 
 ### Scaffold generator
 

docs/guide/server-side-setup.md

@@ -15,83 +15,79 @@ bundle add inertia_rails
 
 ## Rails generator
 
-If you plan to use Vite as your frontend build tool, you can use the `inertia_rails-contrib` gem to install and set up Inertia in a Rails application. **It requires the [Vite Rails](https://vite-ruby.netlify.app/guide/rails.html) gem to be installed and configured in the application.**
+If you plan to use Vite as your frontend build tool, you can use the `inertia_rails-contrib` gem to install and set up Inertia in a Rails application. It automatically detects if the [Vite Rails](https://vite-ruby.netlify.app/guide/rails.html) gem is installed and will attempt to install it if not present.
 
-To use the generator, execute the following command in the terminal:
+To install and setup Inertia in a Rails application, execute the following command in the terminal:
 
 ```bash
 bundle add inertia_rails-contrib
-
 bin/rails generate inertia:install
 ```
 
-This command will ask you for the frontend framework you are using (React, Vue, or Svelte) and will install the necessary dependencies and set up the application to work with Inertia.
+This command will:
+- Check for Vite Rails and install it if not present
+- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask if you want to install Tailwind CSS
+- Install necessary dependencies
+- Set up the application to work with Inertia
+- Copy example Inertia controller and views (can be skipped with the `--skip-example` option)
 
 Example output:
 
 ```bash
 $ bin/rails generate inertia:install
-
 Installing Inertia's Rails adapter
+Could not find a package.json file to install Inertia to.
+Would you like to install Vite Ruby? (y/n) y
+ run bundle add vite_rails from "."
+Vite Rails gem successfully installed
+ run bundle exec vite install from "."
+Vite Rails successfully installed
+Would you like to install Tailwind CSS? (y/n) y
+Installing Tailwind CSS
+ run npm add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries --silent from "."
+ create tailwind.config.js
+ create postcss.config.js
+ 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
 What framework do you want to use with Inertia? [react, vue, svelte] (react)
- run npm add @inertiajs/inertia @inertiajs/react react react-dom from "."
-
-added 6 packages, removed 42 packages, and audited 69 packages in 8s
-
-18 packages are looking for funding
- run `npm fund` for details
-
-2 moderate severity vulnerabilities
-
-Some issues need review, and may require choosing
-a different dependency.
-
-Run `npm audit` for details.
- run npm add --save-dev @vitejs/plugin-react from "."
-
-added 58 packages, and audited 127 packages in 6s
-
-22 packages are looking for funding
- run `npm fund` for details
-
-2 moderate severity vulnerabilities
-
-Some issues need review, and may require choosing
-a different dependency.
-
-Run `npm audit` for details.
+ run npm add @inertiajs/react react react-dom @vitejs/plugin-react --silent from "."
 Adding Vite plugin for react
  insert vite.config.ts
  prepend vite.config.ts
-Add "type": "module", to the package.json file
- gsub package.json
-Copying inertia.js into Vite entrypoints
+Copying inertia.js entrypoint
  create app/frontend/entrypoints/inertia.js
 Adding inertia.js 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 framework related files
+Copying page assets
  create app/frontend/pages/InertiaExample.jsx
+ 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
+Copying bin/dev
+ create bin/dev
 Inertia's Rails adapter successfully installed
 ```
 
 With that done, you can now start the Rails server and the Vite development server (we recommend using [Overmind](https://github.com/DarthSim/overmind)):
 
 ```bash
-overmind start -f Procfile.dev
-# or
-foreman start -f Procfile.dev
+bin/dev
 ```
 
-And navigate to `http://127.0.0.1:5100/inertia-example` to see the example Inertia page.
+And navigate to `http://localhost:3100/inertia-example` to see the example Inertia page.
 
 That's it! You're all set up to start using Inertia in your Rails application. Check the guide on [creating pages](/guide/pages) to know more.
 

lib/generators/inertia/install/frameworks.yml

@@ -0,0 +1,41 @@
+react:
+ packages:
+ - "@inertiajs/react"
+ - "react"
+ - "react-dom"
+ - "@vitejs/plugin-react"
+ vite_plugin_import: "import react from '@vitejs/plugin-react'"
+ vite_plugin_call: "react()"
+ copy_files:
+ "InertiaExample.jsx": "%{js_destination_path}/pages/InertiaExample.jsx"
+ "InertiaExample.module.css": "%{js_destination_path}/pages/InertiaExample.module.css"
+ "../assets/react.svg": "%{js_destination_path}/assets/react.svg"
+ "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+ "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+
+vue:
+ packages:
+ - "@inertiajs/vue3"
+ - "vue"
+ - "@vitejs/plugin-vue"
+ vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
+ vite_plugin_call: "vue()"
+ copy_files:
+ "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
+ "../assets/vue.svg": "%{js_destination_path}/assets/vue.svg"
+ "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+ "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+
+svelte:
+ packages:
+ - "@inertiajs/svelte"
+ - "svelte"
+ - "@sveltejs/vite-plugin-svelte"
+ vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'"
+ vite_plugin_call: "svelte()"
+ copy_files:
+ "svelte.config.js": "svelte.config.js"
+ "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+ "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
+ "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+ "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"