Supercharge Your Rails Development: A Deep Dive into Vite-Rails and React Integration

Himalaya Pal — Tue, 27 Aug 2024 02:54:03 +0000

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:

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

class HomepageController < ApplicationController
  def index
  end
end

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

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

Adapt application.html.erb:

<%= vite_javascript_tag 'index.jsx' %>

Now, Integrate and Configure React:

Install react and react-dom:

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

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 />
)

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.

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!