dmoulton/rails+react.txt

## 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