In every website I have ever made I usually make the back-end API using NodeJS and run it on a certain port and make the front-end using React and run it on a different port and make requests to my NodeJS API. Is this the optimal approach to making a web app where I don't want anyone but my front end to access my API? If this is the case what would be the best way to protect my API from being used by anyone but my front end?
I'm assuming your front end React code is going to run on browsers, on machines that you do not control and that are operated by members of the public.
In that case you should probably give up attempting to restrict what code can access your API. Think about the people who are accessing your API, and apply authentication and authorisation systems to them if necessary, but don't attempt to authenticate your front end code.
Your front end code is just a tool that you supply to those people so that they can use your API without doing their own programming. If they don't like it there's very little you can do to stop them reverse-engineering it and using alternative tools to interact with your server side code.
On the other hand it's possible that you are running React on the server side only. In that case you can restrict other applications from connecting to the backend by putting both parts behind a network firewall together, or inside a private network that other people can't access.
I've made many web servers that feed both RESTful APIs and HTML requests on the same server. It is nothing more than an issue of routing requests to the proper handler. The fact that a web server handles both is just a matter of preference.
You are a habit of the tools you use.
Angular can easily build and deploy a front-end with just
ng serve on the command line, and a NodeJS RESTful back-end is as easy as
That's how you've learned to do it, and there is nothing wrong with that.