At the moment, your request sounds very broad/vague to me.
If you can give us some examples of the particular terms and/or processes that are tripping you up, I feel sure our JS people can help.
Oh! Good point.
That makes sense … let me try to think of a good question…
In this specific course – I have:
swag-shop-web on local host:3000
swag-shop-api on localhost:3004
How do I go from development to production, exactly?
What I have done:
npm run-script build
and I have deployed the swag-shop-web to Heroku.
I tried to follow a tutorial – but got quite confused – about how to get the API to talk to the app (if that is the correct terminology?)
When you build your project, the files that are output are all you need for production for the frontend. I’m not really following how your backend is setup to feed that. It looks like 2 different applications, if so they probably can’t both be deployed to the same Heroku instance… but your api could be setup to serve your production frontend. I’m honestly not sure. There’s a million and a half ways to do this.
The easiest way, imho, is to have 2 separate applications and deploy them independently and have your DNS setup in a way that CORS isn’t a problem or to whitelist your frontend with Access-Control-Allow-Origin (do not open CORS completely). Doing it this way, you can have your frontend setup on something fast and free like Netlify or Github Pages and your backend anywhere you want.
The alternative of serving your frontend from your API server can be convoluted and easy to mess up.
Second… “There’s a million and a half ways to do this” ---- What is the best learning path to understanding that part? I notice that lots of books and tutorials stop just before this. There was one series (the REST API with Node.js) which (I guess obviously) went all the way to deploying on Heroku with both a front end and an api…
But many stop just before that step.
How does one learn about this – there is (it seems) a lot to learn — and I am having trouble figuring it out through bits and pieces.
Does that make sense?
I have come across CORS quite a bit…I think I got the basic gist of that… and so following that, I think I understand the idea of whitelisting the frontend … but really don’t know how to do that step-by-step yet…
So – specific questions … if you don’t mind:
How do I whitelist the frontend?
How do I point the api host to the app? (not sure if that is the correct way to phrase the question…) – I am aware of needing a proxy? maybe? but unsure how that works…
Finally… “normally” for React would the api be in the same folder as the app?
CORS is the safety feature of browsers that don’t allow random websites to steal parts of other websites for their own benefit. You can only hit sites from your own domain, which is what I meant by the DNS comment. You can have your frontend and API on different servers, as long as they are under the same root domain.
If they are on different domains, then you can whitelist CORS for that specific domain via the Access-Control-Allow-Origin setting.
How do I point the api host to the app?
If they are on the same domain, the API doesn’t care about the app. If they are on different domains, then you need to use the setting above.
Finally… “normally” for React would the api be in the same folder as the app?
The same root folder, yes, but never the same code folders. The React app is it’s own application by itself. You can package the API and React App together, and allow the Node server to be it’s own webserver and serve the React app from a build folder, but the code should never live with your API code. It’s easier to do them on 2 different servers, which is basically what you’re doing for development. This is why you need to hit 2 different ports, they are 2 different servers that just happen to live together but are totally independent.
