People often specialize in backend development and prefer to follow monolithic patho of rails in order to get things done. Some people focused on frontend don’t care much about backend tech. When it comes to integrating modern frontend frameworks like react with popular backend frameworks one often ponders how to do it best. Should we split our app sharply into backend and frontend and make our react app consume api? Should we go for some stripped down microframework? Usually once it comes to integrating these worlds ceratin questions might arise.

I’d suggest that least painful method to take advantage of both worlds is the pattern where you after compiling your react app you render index file as a view from rails or any other framework after login and then just make sure assets are available from your static serving server.

Lets say you integrate React and Rails. You can symlink your index file to a view file in rails and then render it after login. you can make your build output frontend files to your public folder in rails or any other place you see fit. Then once you develop if your build autocompiles it will constantly put files in proper place. That is development convenience.

For production and testing often a script is desired that will make symlink again if needed and copy all compiled files for production in proper place. Then whenever you build your app you invoke script. It takes your compiled frontend app and hooks it with backend. Then you can ship that.

This pattern is what I found to work best for various projects. Not only it is very convenient development wise it is also a generic patter that you can use for React Angular or any other also with backend frameworks of your choice. It also plays great with auth mechanisms. From your SPA you can always set location in browser directly and it will redirect to backend even if your SPA intercepts location. There is JavaScript trick that one can use.