Thanks for looking into this with me, I hope we can continue working towards a better process .
- is the back-end node server and create-react-app server for client-side running on two separate node instances?
I’m assuming you mean this is for development only, in which case the answer is yes. In one terminal I have node running, and in another I have create-react-app running.
- does your client-side source live with back-end source under the same project?
Yes. I wanted them separate when I began looking into developing Shopify apps but I found very little information on this subject, and the tutorials seemed to assume a monolith configuration, or at least not account for different services. I still tried at a mini-microservice-like architecture where I’d have a cluster running nginx and routing requests to the main api server which would then redirect to a CDN or another server serving the static files that render on the Shopify Admin but I found this unnecessarily complex as it added more issues related to CORS, sameSite cookies, and deployment. I still keep my script tags in CDNs though.
- how is the client side js loaded/included in your setup?
I literally just plopped a CRA output into my project under a folder named “frontend”. Development-wise, it’s as if they were completely different code-bases, there’s no code shared between them. When it’s time to build, to test an integration with Shopify in the Admin or pushing to prod, my npm script builds my frontend as any other CRA app and moves the build up into my backend code where it can be mounted and served as static files. In development, I would skip the build step and just run my frontend in another terminal and leverage CRA’s built-in hot module reloading.
- have you looked into using a framework like next.js?
Yes, but I don’t like how abstracted it is. I’ve always enjoyed how simple CRA has been for developing React apps and my backend requires only node, nodemon, and a tsconfig. I find it simpler to glue two simple parts together than to manage something like Next.js. I’m sure Next.js is incredible but it has so many optimizations and configurations that I don’t understand or necessarily even need to the point that I wouldn’t feel confident in my abilities in debug if something went wrong.