dmoulton · July 7, 2023 21:17
diff --git a/rails+react.txt b/rails+react.txt
 consult https://blog.appsignal.com/2022/08/03/connect-a-ruby-on-rails-app-with-react-in-a-monolith.html

 rails new <app name> -d <database> -j esbuild
 cd into app
 ./bin/rails db:create
 ./bin/rails s
 generate a home controller -> ./bin/rails g controller Home index
 update routes to make home#index the root
 yarn add react react-dom node-uuid
 update the build portion of packages.json to be:
  esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --loader:.js=jsx
 modify views/application.html.erb to have this body

 <body>
  <div id="app"></div>
 </body>

 app/javascript/application.js should change to:

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

 const container = document.getElementById("app");
 const root = createRoot(container);
 root.render(<App />);
 //---------

 app/assets/config/manifest.js should be changed to this:

 //-----------
 //= link_tree ../images
 //= link_directory ../stylesheets .css
 //= link application.js
 //-----------


 create App.js in app/javascript and add the base component

 you can start both rails and yarn with

 ./bin/dev

 You may get an foreman error with the above. If so then uninstall and reinstall the foreman gem

 If you want to start the 2 servers separately, use 

 yarn build --watch
 rails s

 in different terminals
	consult https://blog.appsignal.com/2022/08/03/connect-a-ruby-on-rails-app-with-react-in-a-monolith.html

	rails new <app name> -d <database> -j esbuild
	cd into app
	./bin/rails db:create
	./bin/rails s
	generate a home controller -> ./bin/rails g controller Home index
	update routes to make home#index the root
	yarn add react react-dom node-uuid
	update the build portion of packages.json to be:
	esbuild app/javascript/. --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --loader:.js=jsx
	modify views/application.html.erb to have this body

	<body>
	<div id="app"></div>
	</body>

	app/javascript/application.js should change to:

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

	const container = document.getElementById("app");
	const root = createRoot(container);
	root.render(<App />);
	//---------

	app/assets/config/manifest.js should be changed to this:

	//-----------
	//= link_tree ../images
	//= link_directory ../stylesheets .css
	//= link application.js
	//-----------


	create App.js in app/javascript and add the base component

	you can start both rails and yarn with

	./bin/dev

	You may get an foreman error with the above. If so then uninstall and reinstall the foreman gem

	If you want to start the 2 servers separately, use

	yarn build --watch
	rails s

	in different terminals