All right.
And once we can create the users, we can set up the jobs we can log out.
We can also modify the user.
Now let's switch back to the front end and let's start building our pages.
And actually, the first thing we want to do is to set up a proxy.
You see, by default, browsers do not allow access resources from different servers.
And please keep in mind something very, very important.
That's the case in our scenario when we are in development.
We have a server which is running essentially on one port, so that's one server.
That's our front end.
And then we have our server which is running on at least in my case, 5100.
So those are two different servers and I'll showcase in a second how.
Browser will yell and scream at you if you try to access the resource.
So long story short, we'll have to set up a proxy which will allow us to make that request.
Now it's only needed while we're in development.
Once we go to production, all the front end code will be on the same server.
And again, you'll see that a little bit later.
Of course, once we deploy the application.
Now in our case, it's also a must since we're sending back the cookies.
And one major thing we need to always keep in mind.
Cookies are only sent back to the same server.
So again, in our case, it's a must for us to have a proxy and one by one.
Let's spin up both servers.
So first we're going to go over here with NPM run dev.
So this is going to spin up my server server, basically a back end server and also I want to spin up
the V one.
So let's go over here.
I'll open up a new terminal and I'm going to navigate to a client and I'll sign out.
In next video we'll set up a.
Functionality to have only one command, but that is coming up.
So for now.
CD Client And then once we're there, remember the command is exactly the same.
So we go here with NPM run dev.
So now I have here the backend as well as the frontend.
Now let me open up the front end because I do want to showcase some stuff over here.
Think I have two tabs.
I don't need them.
It doesn't really matter which page you open since we'll set up the functionality in the main JS So
here's what I want to do first in a server, I'll just create the dummy root.
And as a quick side note, if you don't want to follow along as far as making a request which is going
to fail, you don't have to just make sure that you watch till the end and you add this code.
This is a must.
Again, if you're not going to have this code, then you won't be able to follow along.
But I also suggest actually doing this one because we will utilize it a little bit later as well when
we start working with the Axios again.
That's just my suggestion.
Long story short, let's go to a server and let's set up a dummy root.
So somewhere there it doesn't really matter.
Again, we will remove it.
This is just to showcase how.
Of the proxy is going to work.
I'm just going to go with APT get.
So it's going to be a get request.
Pretty straightforward.
Then API, then version one over here.
And then we want to go with forward slash test.
Again, it doesn't really matter what we have over here as long as you remember the actual URL.
Okay.
And as far as the controller, well, let's just send back res.json.
And inside of it, we're going to go with message and we'll say test route.
So pretty straightforward.
Correct.
Now let's navigate to our front end.
So client over here.
And like I said, I'll be setting up everything in the main JSX because we will remove this code eventually
and there's no need to set it up in a specific page when we submit the form or anything like that.
No, I just want to run this when my application loads since in my opinion it's going to be easier to
test it.
So what do I want to do over here?
Well, I want to showcase how we won't be able to fetch the message from our backend.
Why?
Well, because browsers, again, don't allow such behavior.
So let's try over here in the main JSX first, let's go fetch, which is always available.
Then as far as the URL, we're going to go with Http colon, then two forward slashes local.
Host then.
Colon, then 5100.
And then remember the URL was API version one and then test.
Now this returns a promise.
So we want to go with Dot then.
Then we want to actually pass in the callback function.
I'm going to call this raise and I want to return a rest dot Json.
I want to invoke it.
And at the very, very end, I want to grab the data.
So this returns another promise.
And again, we pass in a callback function data and then I want to log the data.
Now, don't worry, we won't need to use such syntax in the upcoming requests.
This is just for demonstration purposes.
So let's save it.
I can guarantee you that this code is correct.
I mean, unless I made some bug.
So let me navigate over here.
Let me refresh and check it out.
In the console, you'll have big fat errors, access to fetch at URL from origin, blah blah blah blah
blah.
Essentially we cannot make such request.
Now, what's the solution?
Well, we want to set up the proxy again on the front end during development.
And after that, everything is going to be correct.
And again, in our case, it's super, super important because even though there are different ways
how we can solve this issue, in our case, we need to make sure that the front end, as well as the
back end are on the same server since we're sending back the cookie.
So the fix is following.
We want to go to a Readme and we want to navigate to v2 dot config js and we want to add this code.
Now I strongly suggest to copy and paste this because while I was developing I made a small typo and
I believe I spent.
From half an hour to one hour.
Basically trying to find the solution.
And at the end of the day, I just realized that there's a small typo.
So here's what we want to do.
We want to grab this server object and we want to set it up here in define config.
And once you have it in place, then we'll make the request and then I'll go over the code essentially
what it's doing.
Now you have multiple options.
You can either just grab the server or you can take the entire thing.
Again, I strongly suggest to utilize the Readme to avoid some unnecessary small bugs.
So let me take this.
I'm going to navigate to my VS config at the moment.
Notice we only have plugins for React, so essentially we want to replace it.
Now of course if you have different port, make sure that you utilize that value.
Now we want to navigate to main JS and what's really cool since we're using the proxy, since we're
on the same server, we actually don't need the localhost part anymore.
That's it.
I can simply remove it.
So that's the first step.
And second.
Now everything is going to work as expected.
So now let me navigate back and check it out.
If you see in the console message and the test route, then everything works.
Again.
If you have some issues, please, please, please stop.
Try to troubleshoot.
Use the course Q&A.
You won't be able to follow along unless you see this message in the console.
If you don't see it, that means the proxy is not working properly.
And if that's the case, again, you won't be able to make any requests.
Now, as far as this code, what's happening over here?
And basically all the requests in our application, in our front end application that are going to go
to forward slash API are going to be directed to this URL.
We will change the origin, which actually is going to fix the cause issue and also we will rewrite
the path and remove the API.
And as far as the rewrite, we're going to modify the path with the regular expression to remove the
API prefix.
And with this in place, we can move on to the next step.