Now to come to an end in this course module,
I added a little frontend project here.
So a little application which would run in the browser
in this case, build with React.
And attached, you'll find this new frontend folder,
which you can simply add to your project,
which contains this application.
The idea is simple.
Up to this point, we always used Postman
for testing our deployed application.
And whilst this is nice,
in reality, we would of course typically
have some kind of frontend,
no matter if that's a mobile app or a web app
as in this case with this React application.
Now earlier in the course,
we already saw how we can have multi-container apps
where one of the containers contains a frontend.
We even deployed that in the deployment section.
I wanna come back to it here though,
because now again, we got something deployed.
We have our running Kubernetes application,
or we're using Kubernetes to deploy this multi-container
microservice like application here.
And that's why we can send these requests here, of course.
Now in this frontend folder, in the source folder,
you find the React code for my frontend.
And you don't need to understand React to follow along.
Of course you can dive into the code,
but it's just some very simple dummy code.
No complex application
but there are two important things here.
I'm trying to fetch tasks here
in one code snippet in the App.js file.
And I'm trying to store a new task
in another code snippet in the same file.
So the App.js file
in that source folder in the frontend folder.
And at the moment to concrete URL
to which these requests should be sent is missing.
Now, here in the end, I wanna use that URL
which we also used in Postman, just to also test this.
So of course we can copy that URL that IP and the port here,
which is exposed by minikube, and paste is in here
to send a get request to this URL/tasks in this case here,
and to send a post request in the add task handler function.
Now, if you add it to that
and you need to do that on your own,
because you will have your very own IP address,
you can rebuild this as an image.
And for that I already have a Docker file
in the frontend folder,
and then try to run this as a container.
In this Docker file we have a multistage set up
because there we first of all build the code
and then we set up an nginx web server,
which serves to build files using the configuration,
which is set up in this nginx con file.
And again, this is also something
I already touched on earlier in the course
when we deployed to applications independent of Kubernetes
and indeed here as well up to this point,
we're not using Kubernetes for this frontend.
Instead, you can see the internet frontend folder
in your terminal
and build this frontend project into an image.
And I'll give it my own name.
And here I will already choose academind/kubdemofrontend
even though I have no Docker Hub repository
with that name yet,
but we can add it later and already used this image name.
So this will now build this image
and we'll go through all these steps
in this multistage Docker file.
And once it is built, once this image is built, we can,
of course run a local container based on that image.
And that local container should then be able
to also reach out to our deployed application,
which runs on this Kubernetes Cluster,
because the code, which runs here in this React app,
all this JavaScript code
will run in the browser in the end.
This is not code, which runs inside of the container,
but instead it's code which is served to the browser
and then executes in the browser.
We had that topic earlier in the course already.
That's why we can use this URL like this.
If we can use it in Postman,
and if we could use it in the browser,
it will also work in does React code
because this code will just run in the browser.
This will not run inside of a container
and therefore this will not be interpreted
as some kind of container internal address
or anything like that.
So long story short,
this code will eventually run in the browser.
So our minikube server should be reachable
with that IP address.
And therefore, once that built here is done,
once our images built,
we should be able to run a container locally on our system
and test this frontend application.
So for this, we can run Docker run
and then use that image name we just assigned,
academind/kub-demo-frontend
make sure to publish port 80 on port 80
because this frontend app will listen on port 80,
and that is the port exposed here.
And it will also add --RM to remove the container
if it's stopped and add -D to start it in detached mode.
And again, just to emphasize it,
of course, this has nothing to do with Kubernetes here
we're using good old Docker
to run a container on our local host machine,
not in a Kubernetes Cluster,
just on our local host machine for the moment
to then connect to that cluster though.
So if I hit enter, this container starts up
and thereafter if you enter local host in your browser,
this application should be loaded.
Now you will see that no tasks are fetched though
even if you click the fetch tasks button,
because if you open up the developer tools in the browser,
you will see that we have a CORs error here,
and this is actually not a bug with Kubernetes
or with anything like that.
But instead our backend,
which we deployed with Kubernetes,
doesn't have the appropriate code to allow the requests
to the tasks application.
For Postman this wasn't a problem
because this idea of cross origin resource sharing
does not matter to Postman but for browsers it does.
And if CORs errors and cross original resource sharing,
doesn't tell you anything
attached you find a resource on that,
which should help you understand this error.
The simple solution is that we need to update our code in
the tasks API to make sure that some extra headers are set,
which then tell the browser
that reaching out to that API is okay.
Now the code, which you need to add
to your tasks app JS file can also be found attached.
T be precise, you'll simply find a new tasks app JS file,
which you can use to replace yours with it.
This code block is new,
and this just sets the appropriate headers,
which ensures that browsers
and application running in the browsers
can indeed communicate with that API without problems.
I'm not adding this to the user's API simply
because this frontend, this dummy frontend,
which I'm providing to you
doesn't try to talk to that API.
If it would,
we would need to add these headers there as well.
With that however, we updated our tasks API source code,
and that of course means that we need to redeploy it.
So, first of all, we should go into the tasks API folder
and build our image again,
the academind/kub-demo-tasks image,
and then we need to push it again, of course,
so that the latest and greatest source code
can be found on Docker Hub.
So I want to push academind/kub-demo-tasks here,
and once it is pushed,
we of course need to make sure that this latest code
is also being deployed at Kubernetes.
And since I didn't change any of my deployment YAML files,
I can't just apply a new configuration,
instead I will delete an existing deployment
and then apply the same deployment again,
which will then lead to the new image being pulled.
So let's wait for it as push process to finish.
And now that it finished,
we can go back into the Kubernetes folder
and run kube + Control, delete-F tasksdeployment.yaml.
Then thereafter,
run kube + Control apply -F tasks deployment.yaml,
and this will then recreate this deployment,
but now use the latest source code.
So eventually that container will be created
and our pod will be up and running again.
Here we go, the new container is up and running.
And with that, the latest code is active there
so now if we reload this React application in the browser
you will see that it crashes.
And if you open the developer tools again,
you see that this happens
because we got the unauthorized error.
This shouldn't be a surprise.
With postman, we did have
to add our authorization header here
with this dummy value in order
to successfully fetch our tasks.
Here by the way it fails because I redeployed it
and therefore all tasks,
which were stored in the past were erased.
But if I post a new task, I can fetch it again,
but we need this authorization header and the frontend,
the React application here, which runs in the browser,
of course will be no exception.
Now to add this header, we can go to this source code,
the React source code and there this fetch task function
in the end and add a second argument here.
So simply a comma and then curly braces,
opening and closing, and add a headers option,
then a colon and then another object
by using opening and closing curly braces.
And then between single quotes
add the authorization header,
and then a colon and the value for it is header,
which should be bearer wide space ABC.
So this needs to be added to this request,
which is sent with help of this fetch function
to provide this header to debts tasks API
when the request is sent.
Now since I changed the React source code,
we should of course, go into the frontend folder again
and build the image again.
So build this academind/kub-demo-frontend image again
with the Docker build command
so that the latest source code is picked up
and is rebuilt as an application.
And once that happened, we can rerun our container.
So therefore, first of all,
let's stop that running container with Docker stop
and by using the name, which was automatically assigned
so that we have no running container anymore.
And once that happened, we can run our container again,
based on that image,
which we just rebuilt, publish our port 80,
remove it when it stops and run it in detached mode.
And if we now run this again, we can reload local host,
and we now should see this one task being fetched.
And if I create a new task, this should also work.
If I click add task and click fetch tasks again,
you see that task is all the fetched.
Now this is all not kube fancier
because it's just a basic demo application
without any advanced functionality.
For example, we also have no error handling built in there.
This is all missing.
It's really just there to show you that a frontend,
which is not Postman is also able to talk
to this Kubernetes managed backend.
However, now is the thing which
I actually want to dive into in this module
to conclude this module.
What if we want to host this frontend
in our cluster as well.
So of course the code should still execute in the browser,
but it shouldn't be served by that cluster
because at the moment we had to run our container locally
here with Docker run.
And whilst we, of course can do that during development
this is not something we do when we want
to serve this to our end users.
There, it should be on some server may be on the same server
or in the same cluster as all our backend services.
So that's what we're going to have a look at next,
how we could deploy this frontend application to Kubernetes.
For that, I will first of all stop
this container with Docker stop.
And then in the next lecture,
we're going to dive into a deploy that.