Introduction

For web developers navigating the expansive Ruby on Rails landscape, the pursuit of tools that elevate efficiency is constant. Enter Vite-Rails, a cutting-edge JavaScript bundler seamlessly woven into Rails, promising unparalleled development speed. In this all-encompassing guide, we'll not only walk you through the effortless installation of Vite-Rails but also empower you to embark on a compelling journey with this dynamic duo.

Step 1: Setting the Stage with Vite-Rails

Before delving into the world of Vite-Rails, ensure your local machine hosts a robust Ruby on Rails application. If not, follow the official Rails installation guide. Once your Rails application is up and running, initiate the Vite-Rails integration with the following commands in your terminal:

1. bundle add vite-rails 2. bundle exec vite install 

Leveraging the power of the RubyGems package manager, these commands seamlessly download and install the Vite-Rails gem along with its dependencies. Post-installation, a vite.config.ts file emerges in your Rails application's root directory, serving as the nucleus for configuring Vite-Rails to suit your project's intricacies.

Step 2: Tailoring Vite-Rails for Your Project

With Vite-Rails now seamlessly integrated, the spotlight turns to customization. Open the vite.config.ts file in your preferred code editor and explore the multitude of options available for tailoring Vite-Rails to your project's unique requirements. A glimpse of a sample configuration is as follows:

#vite.config.ts import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby'  export default defineConfig({   plugins: [     RubyPlugin(),   ], }) 

A pivotal configuration to note is the entryPoint option, specifying the entry point for your JavaScript files. While Vite-Rails defaults to app/frontend/index.js, adapt this option if your entry point resides elsewhere, like app/javascript/entrypoints/application.js.

Step 3: Infusing React into the Mix

Pre-Integration Checklist:

1. Establish a root route in routes.rb: root 'homepage#index'
2. Formulate a HomepageController:

class HomepageController < ApplicationController   def index   end end 

1. Craft an index.html.erb under views/homepage:

<div id="root"></div> 

1. Adapt application.html.erb:

<%= vite_javascript_tag 'index.jsx' %> 

Now, Integrate and Configure React:

1. Install react and react-dom:

yarn add react react-dom # or npm install react react-dom 

1. Forge a index.jsx in your entry point directory (e.g., app/javascript/entrypoints/):

import React from 'react' import App from '../src/App' import { createRoot } from "react-dom/client";  const rootElement = document.getElementById('root') const root = createRoot(rootElement)  root.render(   <App /> ) 

1. Architect your React code:

- Establish a `src` folder within `app/javascript/`. - Create `App.jsx` within `app/javascript/src/`: 

``` import React from 'react'  const App = () => {   return (     <div>       <h1>Hello</h1>     </div>   ) }  export default App ``` 

- Structure your components within the `src` folder. 

1. Update package.json:

"scripts": {     "dev": "bin/vite dev" } 

Adjust Procfile.dev and execute:

bin/dev 

Alternatively, execute two separate commands:

rails s  # and in another terminal npm run dev 

Conclusion

Vite-Rails and React converge to create a powerhouse duo, revolutionizing Ruby on Rails development. With Vite-Rails' swift development capabilities, featuring HMR and pre-bundling, combined with React's declarative prowess simplifying intricate UIs, your development workflow will ascend to unprecedented heights.

Embrace this formidable synergy to optimize performance, elevate efficiency, and seamlessly join a community of developers already propelling their Rails projects forward with Vite-Rails and React. Happy coding!