Rails 7 + React + tailwind のプロジェクト新規作成（esbuild）

Based on the specified options, the following options will also be activated:

  --skip-active-job [due to --minimal]
  --skip-action-mailer [due to --skip-active-job, --minimal]
  --skip-active-storage [due to --skip-active-job, --minimal]
  --skip-action-mailbox [due to --skip-active-storage, --minimal]
  --skip-action-text [due to --skip-active-storage, --minimal]
  --skip-javascript [due to --minimal]
  --skip-hotwire [due to --skip-javascript, --minimal]
  --skip-action-cable [due to --minimal]
  --skip-bootsnap [due to --minimal]
  --skip-dev-gems [due to --minimal]
  --skip-jbuilder [due to --minimal]
  --skip-system-test [due to --minimal]

rails new --name my-new-app \
 --skip-active-job \
 --skip-action-mailer \
 --skip-active-storage \
 --skip-action-mailbox \
 --skip-action-text \
 --skip-hotwire \
 --skip-action-cable \
 --skip-bootsnap \
 --skip-dev-gems \
 --skip-jbuilder \
 --skip-system-test \
 --javascript esbuild \
 --css tailwind \
 .

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

#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
  echo "Installing foreman..."
  gem install foreman
fi

# Default to port 3000 if not specified
export PORT="${PORT:-3000}"

exec foreman start -f Procfile.dev "$@"

> ./bin/dev
01:47:45 web.1  | started with pid 72333
01:47:45 js.1   | started with pid 72334
01:47:45 css.1  | started with pid 72335
01:47:45 js.1   | yarn run v1.22.19
01:47:45 css.1  | yarn run v1.22.19
01:47:45 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --watch
01:47:45 css.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify --watch
01:47:45 js.1   | [watch] build finished, watching for changes...
01:47:45 css.1  |
01:47:45 css.1  | Rebuilding...
01:47:45 css.1  |
01:47:45 css.1  | warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
01:47:45 css.1  | warn - https://tailwindcss.com/docs/content-configuration
01:47:45 css.1  |
01:47:45 css.1  | Done in 100ms.
01:47:45 web.1  | DEBUGGER: Debugger can attach via UNIX domain socket (/var/folders/gq/2k4rl7w53y10zd0g9xb_94j00000gn/T/ruby-debug-sock-501/ruby-debug-s10akir-72333)
01:47:45 web.1  | => Booting Puma
01:47:45 web.1  | => Rails 7.1.2 application starting in development
01:47:45 web.1  | => Run `bin/rails server --h01:47:45 web.1  | Puma starting in single mode...
01:47:45 web.1  | * Puma version: 6.4.0 (ruby 3.2.2-p53) ("The Eagle of Durango")
01:47:45 web.1  | *  Min threads: 5
01:47:45 web.1  | *  Max threads: 5
01:47:45 web.1  | *  Environment: development
01:47:45 web.1  | *          PID: 72333
01:47:45 web.1  | * Listening on http://127.0.0.1:3000
01:47:45 web.1  | * Listening on http://[::1]:3000
01:47:45 web.1  | Use Ctrl-C to stop

> bundle exec rails g controller Top index
      create  app/controllers/top_controller.rb
       route  get 'top/index'
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
      invoke  test_unit
      create    test/controllers/top_controller_test.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    test_unit

 Rails.application.routes.draw do
+  root 'top#index'
+
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check

   # Defines the root path route ("/")
   # root "posts#index"
 end

-<h1>Top#index</h1>
+<h1 class="text-4xl font-bold">Top#index</h1>
-<p>Find me in app/views/top/index.html.erb</p>
+<p class="italic">Find me in app/views/top/index.html.erb</p>

 {
  "name": "app",
  "private": "true",
  "dependencies": {
    "autoprefixer": "^10.4.16",
    "esbuild": "^0.19.5",
    "postcss": "^8.4.31",
+   "react": "^18.2.0",
+   "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.5"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15"
  }
}

01:49:00 js.1   | [watch] build started (change: "package.json")
01:49:00 js.1   | [watch] build finished

> bundle exec rails g controller Top index
      create  app/controllers/top_controller.rb
       route  get 'top/index'
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
      invoke  test_unit
      create    test/controllers/top_controller_test.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    test_unit

 Rails.application.routes.draw do
+  root 'top#index'
+
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check

   # Defines the root path route ("/")
   # root "posts#index"
 end

import React from "react";
import { createRoot } from "react-dom/client";

const container = document.getElementById("root");

if (!container) {
  throw new Error("Couldn't find a root element");
}

const root = createRoot(container);

document.addEventListener("DOMContentLoaded", () => {
  root.render(
    <>
      <h1 className="text-4xl font-bold">Yay! You're on Rails!</h1>
    </>
  );
});

<%= javascript_include_tag "Top", defer: true %>

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

 module.exports = {
   content: [
     './app/views/**/*.html.erb',
     './app/helpers/**/*.rb',
     './app/assets/stylesheets/**/*.css',
-     './app/javascript/**/*.js'
+     './app/javascript/**/*.*'
   ]
 }

yarn add -D eslint prettier eslint-config-prettier

yarn create @eslint/config
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "@eslint/create-config@0.4.6" with binaries:
      - create-config
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

 module.exports = {
     "env": {
         "browser": true,
         "es2021": true
     },
     "extends": [
         "standard-with-typescript",
-        "plugin:react/recommended"
+        "plugin:react/recommended",
+        "prettier"
     ],
     "overrides": [
         {
             "env": {
                 "node": true
             },
             "files": [
                 ".eslintrc.{js,cjs}"
             ],
             "parserOptions": {
                 "sourceType": "script"
             }
         }
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module"
     },
     "plugins": [
         "react"
     ],
     "rules": {
     }
 }

yarn tsc --init

services:
  web:
    image: ruby:3.2.2
    command: 'env RUBY_DEBUG_OPEN=true bin/rails server --binding 0.0.0.0'
    ports:
      - 3000:3000
    volumes:
      - ./:/usr/src/app
      - bundler:/usr/local/bundle
    working_dir: /usr/src/app

  js-build:
    image: node:20.9.0
    command: 'yarn build --watch'
    stdin_open: true
    working_dir: /usr/src/app
    volumes:
      - ./:/usr/src/app
      - node_modules:/usr/src/app/node_modules
      - yarn_cache:/usr/local/share/.cache/yarn/v6

  css-build:
    image: node:20.9.0
    command: 'yarn build:css --watch'
    stdin_open: true
    working_dir: /usr/src/app
    volumes:
      - ./:/usr/src/app
      - node_modules:/usr/src/app/node_modules
      - yarn_cache:/usr/local/share/.cache/yarn/v6

volumes:
  bundler:
  node_modules:
  yarn_cache:

docker compose run --rm web bundle install
docker compose run --rm js-build yarn install