So you're working on a full-stack app, React on the frontend and...well anything else on the backend. Your Single Page Applications (SPAs) will have to interact with your backend through API/HTTP requests.
When you publish your app, you have two options.
- backend serves your frontend
- backend and frontend hosted separately (you will need to configure COORS for this to work)
However, in development, it's much much (did I say much?!) easier to run your frontend React app separate from your backend. For this to work, though, you'll need to make cross-origin requests since they are running on different ports. For example, by default Create React Apps run on port 3000, and your backend server might run on 8000. To allow this to work in development, you can set up a proxy in your React app.
To solve this problem, we can configure a proxy in the
package.json file of the React project. This allows the app to "pretend" it is making requests from the same port of the server.
To configure the proxy, you'll need to add the following line to your
Then, in your React app, you can make API requests by using relative paths. For example,
Now, you should be able to run your frontend and backend separately during development, while making API requests using relative paths.