And once have talked and talked and talked about it for what it seems to be like a half an hour now,
I want you to take a look at the research that I provided in reading me.
So notice here we have create React app proxy.
And this is the documentation for it.
And then this is going to be the code.
So let me navigate there, and then I'm just going to basically explain what's happening.
And once you get here, I strongly suggest reading the first, I don't know, three paragraphs.
Yeah, I think three is going to be more enough where they explain everything in great detail.
I just want to mention two things first.
Once we have this in package, Jason, the proxy and then our own server, you know, which in our case
is going to be 5000 on our front end application will be able to go with fetch or access, and auctions
will install access and then forward slash and line whatever is the endpoint.
Like I said, well, that's all, that's jobs.
And hopefully you get the gist of that's point number one.
And then second, this only works in development.
So if you have a situation where your front end react application is going to be hosted separately from
your server, which is the case, these are the questions that I'm getting in my note.
For example, you need to keep in mind that this setup is not going to be affecting that.
So you'll have to figure out how to do that from your own hosting provider.
It's not going to be the case.
This is only in development again.
In our case, we'll build them as static assets at the end of the day anyway.
So we'll fix that issue this way and it's going to be hosted on the same server.
But if you don't have that situation, this only works in development, and this is very, very important,
and therefore I am being annoying and repeating that.
So let's finally set this up where I want to go back to my story first.
And like I said, this was just to showcase some stuff.
So remove the course here and I'll remove the course over here as well.
Then I want to navigate to my client client package, Jason.
Extremely important.
Please do not set this up on the server and I'm going to go here.
So these are my React commands, so I know that I'm in the proper place and now we want to go with proxy
online and we want to provide the URL.
Now, in my case, I remove the trailing slash if you want.
You can add that, but you have to remember that pretty much every time you set this up.
So let me go to my dashboard here and I'll grab this one over here.
So the localhost 5000, let's actually cut this out one minute, and then let's go back to the proxy
copy and paste, and let's remove the efforts.
Now also one thing to keep in mind, and actually, I have to add that here is the fact that we need
to restart everything.
So let's go here with a restart and then I'm just going to say app.
So you know that we're actually restarting the concurrently.
So stop it over here.
Let's go with npm start.
And then where I have the dashboard, I simply want to go with 4GB.
That's it.
That's all we have to do.
We want to save it.
And now you'll notice that not only I can successfully access the data without that annoying course.
I can also skip the entire local 5000 part, and technically everything works.
But there's another and I specifically wanted to discuss this error because it's something that I think
that you should be aware of where when we set up the proxy, we are talking about the fallback.
Now what do I mean by that?
Well, notice over here how we're just looking for a forward slash, correct?
But when we're talking about the forward slash, actually, that is going to be our own indexation email,
well, this is why we get this weird bug here.
Unexpected, though, can blow over.
And if you want to console.log, you'll see the response.
So essentially, there is a successful response.
This is just that.
I'm trying to convert this into adoration now where I'm going with this.
Back on the server, instead of just having this forward slash and then bumming around, I might leave
this one just in case.
So maybe there's a time when I want to showcase something in a browser again.
We can always remove those suckers later.
But for the time being, I'm just going to go with API and then version one.
Why?
Well, because all our APIs are going to start like this.
We're going to go with API version one and let's just say here API and now it's going to happen back
on the dashboard.
If I add here API and then version one, you manage that everything works.
So now I can clearly see the API.
So essentially this is treat it as a fallback.
So if you don't have that resource on your React server, advantage is going to be like, OK, so have
this proxy.
You have this localhost 5000.
Let me go and take a look at all of that.
Now, if I'll add here something like random, then I should get back the error because there is no
resource correct.
So we get back four or four.
That's a start.
And then the second one we get of these chase on error because we're not able to convert it into education.
I know that this was somewhat long VIDEO Probably for setting up the proxy.
But in my opinion, it's very important that you understand these nitty gritty details because in my
opinion, it will help you tremendously when you had some kind of bugs, especially while you're pushing
your project up to production.
So let me remove the random part here.
I mean, just take a look that, yes, I'm able to set up successful requests, and now let me just
simply showcase that I can still access the data.
So let me comment on the API one and back to the data one, and you'll notice that in a console, I
still see the jump.
So just to recap, this is going to be treated as a fallback.
So we're looking for the resource and if it's not on our server, then we're going to use our proxy
rather now in order to add it, we need to go to packaged JSON me to go with proxy and learn whatever
is the URL we need to restart the server.
So market that is going to be concurrently.
And lastly, it is only going to work while you're developing online when you push this up to production.
You'll have to figure out which option you pick, whether we'll use React Build to build this up as
static assets and then serve them on the express server.
But if you decide to host them on different platforms, meaning to front an application and manage the
server application, then you have to add some configuration options that are provided by your hosting
provider.