All right.
So as I promised I preferred a front end application for you which you can use to consume your back
and application.
No one expects a fully polished product here but this application should be good enough for you to feel
proud of your progress.
You've done so far this gets proposed contains the application source code and I provided that the resources
for this lecture.
Well feel free to fork it and make some changes if you'd like.
It's reading and react so if you're into that just have fun.
You can either download the zip directly.
I'm going to clone it using get my projects folder in my terminal clone
and I'm going to see the into that folder right so the first thing we have to do is install the dependency.
So if you're using NPM that's going to be npm install amusing yarns so young and old
and once we have everything installed we can start the application by typing in NPM start or yarn start
though and start
and the application should be served at local host three thousand and one
the origin of this front an application in development mode is three thousand and one.
We're not serving this application static or anything we have a web server from react.
I think it's a weapon dev server but I'm not sure and that one is serving application in port three
thousand and one.
So the origin of this front and application is not the same as the origin of our next yes application.
Your original foreign test yes application is local those three thousand by default NSG yes applications
only allow incoming requests from the same origin to fix this.
We need to allow requests from different origins in our next application though back to our code base.
And I'm gonna give you a choice here.
You can choose if you want to have your API exposed and consumed by the public and that's fine.
You can then enable Of course both in development and production mode however for the sake of this course
I'm going to only allow course in development mode.
And then when we deploy the application in production I will whitelist the origin from which I serve
the front end only I only allow usage of my application.
The other front end I'm going to go that route enabling course on the next yes project is as simple
as calling your app instance with enable enabled course.
Oh app enable worse.
And at this point this is enabled.
That's fine let's look at our console however.
I don't want this to always happen.
I'm going to wrap this request I want to rub this request with if node and equals development but only
when the environment is development.
Well actually this 3D process and then only when we're running on development mode I want to call this
and there is one more change I need to make to make this work.
And that would be impacted Jason
so far when we run start Dev we start application without defining this node the end variable.
So I'm gonna define it just before running node one here so node and equals development.
And that should do the trick
I'm going to restart the application.
You can see we called it quits no and development here and if we go back to our front end refresh and
tried to log in user 1
and indeed we managed to log in.
All right.
Perfect though I'm gonna give you a quick walk through this application though back to the logging page
here you can sign in if you don't have an account you can sign up you provide a user name and password
we define the rules here.
Let's try to define a password it is too weak.
So up password two week password must be longer than or equal to it.
Gardner So we have the validation errors and opt here in the front end
and this is a good password.
I can sign in
and I don't see any desk because this is a new user who doesn't have any desks going to create a task
and here the desk appears and I'm gonna create another one.
And it appears as well.
Right.
So here's a list of tasks for each desk.
I can delete it.
We're going to look into that later.
I can update the status.
I'm gonna send this one in progress and I'll I can apply some filters based on the status I'm going
to search for in progress desks that I see only that one opened desks and then I see on the open desk
and done I won't see anything
I can also searched with a term.
So in the title or description of a task though it's for real let's search for another so this works
just like it worked in our API and actually consuming our API here and finally I can delete desks if
I'm going to log out or actually let me refresh.
You can see that desk is indeed deleted.
So it's all persisted.
I'm gonna go out and try to log in as User 1
I do see the user want desks.
I do not see any other task.
Oh yeah that's it.
That's it for the front end application.
It's not super sophisticated but it fully consumes our API.
I hope you like it.
I hope you feel proud and again if you know a thing or two about front end development.
Feel free to just walk this repository and play with it as much as you wish.