[Awesome Ruby Gem] Creating a Rails App with React by jsbundling-rails Gem

Creating a Rails App with React by jsbundling-rails Gem

Ruby on Rails is a robust web application framework that simplifies the creation of complex web applications. One of the recent additions to the Rails ecosystem is the jsbundling-rails gem, which provides a streamlined way to manage JavaScript bundling with tools like Esbuild. In this blog, we’ll walk through setting up a new Rails application with the jsbundling-rails gem, configuring Esbuild, and integrating popular JavaScript libraries React.

Before you begin, make sure you have Node.js and NPX installed on your system. You can download and install them from the Node.js website.

Verify the installation by running:

node -v

npx -v

Step 1: Create a New Rails Application

First, ensure you have Rails installed on your system. Then, create a new Rails application with Esbuild as the JavaScript bundler:

rails new my-rails-app -j esbuild

This command initializes a new Rails app named my-rails-app with Esbuild for JavaScript bundling. You’ll see a series of files and directories created as part of the app setup.

Step 2: Install Dependencies

Navigate to your new app directory and install the necessary gems and JavaScript packages:

cd my-rails-app
bundle install

Next, install the Esbuild bundler and other JavaScript dependencies using Yarn:

yarn add esbuild

Alternatively, if you prefer using pnpm, install pnpm globally and use it to manage your packages:

npm install -g pnpm

pnpm install

Step 3: Configure JavaScript Bundling

Rails provides a default configuration for Esbuild, but you may want to customize it. Create an esbuild.config.mjs file in the root of your project with the following content:

const entryPoints = [
    "application.js",
    "administrate.js",
    "react.tsx"
];

const watchDirectories = [
  "./app/javascript/**/*.{js,ts,tsx,jsx}",
  "./app/views/**/*.html.erb",
  "./app/assets/builds/**/*.css", // Wait for cssbundling changes
  "./config/locales/**/*.yml",
];

export { entryPoints, watchDirectories };

This configuration specifies the entry points for your JavaScript files and directories to watch for changes.

Step 4: Integrate React and TypeScript

To add React and TypeScript support, install the necessary packages:

pnpm add react react-dom @types/react @types/react-dom typescript

Next, create a tsconfig.json file in the root of your project to configure TypeScript:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react"
  }
}

This configuration enables TypeScript with JSX support for React.

Step 5: Configure Stimulus and Turbo

Rails 7 integrates seamlessly with Hotwire, which includes Turbo and Stimulus. Install these libraries using pnpm:

pnpm add @hotwired/stimulus @hotwired/turbo-rails

Update your JavaScript entry point (app/javascript/application.js) to include Turbo and Stimulus:

import { Turbo } from "@hotwired/turbo-rails"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

Step 6: Run the Server

With everything set up, start the Rails development server and the JavaScript bundler:

bin/rails s

yarn build --watch

The bin/rails script runs the Rails server and the yarn build --watch runs Esbuild watcher concurrently, ensuring your changes are reflected immediately.

Conclusion

By following these steps, you have successfully created a new Rails application using the jsbundling-rails gem with Esbuild. You’ve also integrated React, TypeScript, Turbo, and Stimulus into your Rails app, providing a modern and efficient development environment. This setup not only simplifies JavaScript bundling but also enhances your development workflow with powerful tools and libraries.