Rails 7 with Bootstrap + React + TypeScript

Rails 7 with Bootstrap + React + TypeScript
Photo by Lautaro Andreani / Unsplash

Generate new Rails application

rails new myapp -j esbuild -c bootstrap

Add React and TypeSript with npm

cd myapp
npm i react react-dom @types/react @types/react-dom typescript

Init tsconfig.json

npx tsc --init --project tsconfig.json --noEmit --jsx react

Build and Check. Add to packages.json

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
  "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
  "check-types": "tsc --project tsconfig.json --noEmit --watch --preserveWatchOutput"
}

Procfile

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch