Rails 7 with Bootstrap + React + TypeScript

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

Leave a Comment

Your email address will not be published. Required fields are marked *