mars
commented
6 years ago Hi @kurokoda,
No, you're not the only one who has these questions 🍻 😃 There are plenty of good reasons to deploy a UI/frontend separately from API/backend, and there are plenty of good reasons to deploy them as a single, monorepo Node app. That's a choice to be carefully made.
To answer how to take the monorepo approach, here's a minimal reference app:
create-react-app with a Node/Express server on Heroku
▶️ heroku-cra-node
To run UI/frontend as a separate app, use this buildpack (where this issue is filed).
Do not use this buildpack with the monorepo, heroku-cra-node approach. They are not compatible.
Whenever a browser/Javascript app uses APIs hosted at a different origin, then cross-origin resource sharing [CORS] will come into play. Even if you avoid it in production, during local development CORS will probably become an obstacle thanks to different localhost:XXXX port hostnames. This is why both create-react-app-buildpack and heroku-cra-node both document proxy-based solutions.
nero2009
I'm trying to deploy a React SPA built with the Create-React-App tool from Facebook following this model, where the client is nested in the main directory:
http://ericsowell.com/blog/2017/5/16/create-react-app-and-express
Which works fine, except I now need to use the create-react-app-buildpack on the client with a static.json file in order for Heroku's SPA routing to work when you enter the app from somewhere other than root. At the same time, I think I need to be running the node buildpack to handle my server, so I have to have my server as the root and the client nested below it.
I tried breaking the two apps apart, but the subsequent CORS issues are driving me nuts.
I can't be the only person trying to get a MERN stack SPA running on Heroku, do you guys have a fix for this kind of situation?