All right.
Hopefully, you were able to spin up concurrently and your result is exactly the same every time you
make change in the server.
We're listening for that as well as the frontend, but we're not done with a setup when it comes to
a front and back end.
So effectively, the way we'll build on Christian will be setting up the logic on a server and in our
React application, we'll be making requests.
But there's a big gotcha right now.
And that is the simple fact that even though we have a server running as well as the frontend since
both of them are on separate servers, we won't be able to communicate between the two.
And technically, this video is optional.
You don't have to a along since I remove the code anyway.
But it's very important for me to showcase the problem and that in the next video, I'll show you possible
solutions.
And the one that we'll hear, and let's just start very simply by navigating the server address.
And let's try to remember that we have this dummy, right?
Correct.
So we have apps that get online, which sound welcome.
Now what do you think is going to happen if I'm going to go to localhost 5000?
And this is not a trick question.
I mean, we should see the welcome correct unless you, I don't know, don't have the browser running
or whatever.
OK, so that kind of makes sense.
So let's also set up dummy right over here again if you don't want to.
You don't have to do this, but it's very important for me to showcase everything in great detail.
So that way you're on the stand for your future projects.
And I'm just going to set up the dummy route again.
I'm going to remove it in a second.
And all that, and here's what I want to do is just take this localhost because remember, the URL is
for slash API, and that's not the gotcha here.
I simply want to go here with Get our son.
And yep, I have the welcome and I'm not going to save this route.
This is just for demonstration.
But here comes the trick question.
If I set up a fetch request in the dashboard page or any of the pages, for that matter.
That's not the trick.
But what do you think is going to happen?
Well, there's only one way to find out, correct?
So let's go to the dashboard and I'm going to start by getting my user effect.
So I'm going to say here import and use effect.
Now that one is coming from react and then let's set up the function, let's set up fetch data.
And even though eventually we will use Axios install everything because it's going to be very useful
as we're progressing with the application.
For now, again, this is just for demonstration.
So let's just use fetch.
Again, that's not the tricky part.
So let's say here, fetch data is equal, not date for data is equal to a sync vine.
We're going to function and then instead of the function body, let's go with councillors.
No one is equal to a weight fetches, built in.
So we don't do anything and always grab a localhost 5000 because I'm just too lazy to type that out.
So it's passing the string gathered and it's good cast and data is equal to weight.
And remember, we need it to run a response.
And Jason?
And then at the very end, we'll go with data and I'll utilize my years effect where I'm just going
to say once the application opens up, basically once I navigate to that more page, well, then I want
to invoke it, correct?
And since I only want to do that when the component mounts kind of makes sense.
If I set up my dependency era and I'm just going to be an empty array and then it's out of my callback
function, let's go with fetch and we're going to go with fetch data in this case.
So let's save it.
And what you'll notice that we're going to get big fat are not technically, we're going to make an
argument that it is because we didn't set up a try catch.
But keep in mind, this will only make sure that our application doesn't break.
We still won't be able to access the data.
So in here, let's go with our like so server.
And yes, our application works, but I hate to break it to you.
We don't have access to the simple, silly Hello.
Why?
Well, I'll talk about it in the next video.
But hopefully this is clear that unless we make some changes to our application, this is not going
to work simply because.
Both of our applications are living on separate servers, so we have one localhost 5000 thousand one
local host, 3000.
And then in the next video, I'll cover what are the solutions?
And also what is going to be approach at the very, very end once we push this up to a production?