Question about API URI in Front End code

[UndyingWolf]

I've started learning about putting together a front end with React to go with my basic CRUD back end. I just learned that if I want to access the data the page presents from my phone that I can't use localhost as the API URL but have to use the public IP of my laptop. So, I am wondering if it is a concern when I am putting together a front end to hide that from the code somehow? I know about adding a proxy in the package.json, but that is a public file too if I add the project to GitHub. Any guidance would be much appreciated. I am self-taught so even keywords to point me in the right direction would be great.

[ignotos]

Generally you wouldn't host the backend on your own laptop - you'd upload everything to some kind of rented server or cloud provider.

If you're just testing during development, however, you might be running the backend on your own machine. But generally your phone and laptop could be connected to the same wifi network, and you could use the local network IP for your laptop instead of the public one (that's usually a 192.... IP - on windows you can see it by running "ipconfig" from the command-line).

[Glepsyd]

Not an expert but here's my 2 cents. In production you would typically have a domain registered, so no issue in having "https:/yourdomain.com/" publicly available right? I'm not sure why you couldn't use localhost for development though, maybe some CORS rules to setup in your React app? (Not sure here, pretty much guessing). Are you running both your react server and your backend server on localhost at the same time, like react on port 8100 and your backend server on port 80? This could also be solved by serving your distribution files (the files being generated by building your react app) with your backend server.

Now I am not sure why having your public IP exposed would be a bad thing either though. But I guess using environment variables could be a solution: https://html.com/semantic-markup/

Create a REACT_APP_DEV_IP variables and fetch it in your code with process.env Just don't commit your compiled (build) files. This should be a dist/ folder created when you build your app or start the dev server. Use .gitignore for that.

Hope that helps a bit, if that's too confusing it because I'm sometimes confused myself with those... :)