Runbook for creating a new rails/react app from scratch

• rvm get stable
• check here for latest stable release
• rvm install <latest stable version>
• rvm --create --ruby-version <x.x.x>@<project> #creates a gemset and dotfiles
• gem install bundler
• bundle init
• bundle add rails
• bundle add bootsnap (workaround for issue with rails new)
• bundle exec rails new <APP NAME> -d=sqlite3 --webpack=react --skip-coffee
• echo <x.x.x> .ruby-version
• echo <project> .ruby-gemset
• npm install n stable
• yarn add react react-dom
• yarn add --dev @babel/preset-react @babel/preset-env babel-jest jest @testing-library/jest-dom @testing-library/react jest-environment-jsdom istanbul-reports
• package.json:

  "jest": {
    "testPathIgnorePatterns": [
      "node_modules/"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/javascript",
      "app/javascript/components"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "text",
      "html"
    ],
    "coverageDirectory": "coveragejs",
    "testEnvironment": "jsdom"
  },

• babel.config.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
}

• NOTE: For production, esbuild takes care of compilation and outputs compiled assets into assets/builds/ during asset compilation. It intelligently handles files by file extension (e.g. .jsx, .js, .ts, etc.). However, for testing, jest needs to do its own compilation both for the test files and for the files being tested. That's why you still need to set up babel for jest here.
• NOTE: During precompilation rails just runs the build script in package.json. You can customize esbuild settings/options there.

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"