[Intro Music]
We just successfully created and
activated Python virtual
environment for our backend API
service. And we successfully
started Python application using
'python' command here. And now we see
the API service is still running.
Frontend application is also
running here. Notice that those
applications utilize different
ports. Frontend is running at Port
3000, and backend API service is
running at Port 5050. Let's now
check how those two applications
work together. Let's go to web
browser, and let's go to frontend
application here. Recap that before
when we tried to search for new
image, we got 'ERR_CONNECTION_
REFUSED'. Let's clear console now,
and let's search for image again.
Again, 'sun' let's say, click Search.
And now I see that image was
successfully retrieved. Here is
image itself, here is the search term
that we entered in the search bar,
here is the description of the image,
and here is button which allows us
to Delete this image from the Frontend
application. Let's now go to
Network tab here, select Network.
And in this step, you will see
actual request to the backend
service. Here it is. If I click on
it, I will see that there is the
Request URL: http localhost IP
address port 5050, that's that port
where our backend service is
running. Here is actual path on the
server, 'new-image'. And there
was query parameter which is set to
'sun', which is actually search
term which was entered by the user
here in the frontend application.
Request Method is GET. Status Code,
which is the response to the code
from the server is 200 OK,
because now server correctly
processed request and returned us a
response. And if I click on
Response step here, I'll see JSON
object, which describes actual
image that was retrieved by the API
service using Unsplash Access Key.
Here are all the details about this
particular image. Let's create one
more request to the API service,
and let's search for new image, for
example, 'water', Search, here is one
more image. Previous remains in place
here. And here, I see one more
request. And here was response from
the server. This whole frontend
and api services could communicate
right now. If I go to the terminal
here, I will see that there were
requests to following URLs here and
here; and server responded with
Status Code 200 OK, which
means that it correctly processed
request and sent correct
response to the client. If you see
some errors here, it might be due
to incorrect configuration of the
UNSPLASH_KEY here in the '.env
.local' file. Please double check
that there is UNSPLASH_KEY with
corresponding key, that is your
UNSPLASH_KEY from your account.
All right, now we are running our
application locally. But we are
doing that with help of Python, and
NPM. And we are running this
application without Docker. And for
that we're required to install
Python and Node.js directly on our
computers. We require actually
additional pieces of software in
order to be able to run application
like that. If you want you could play
with this application. You could
delete images. They are actually
deleted from the state of the React
application. You could search for
new images, spend some time in
order to get familiar with this
frontend application. And after
the small pause, I'll summarize
what we did actually in order to
run images-gallery project without
Docker locally on our computers.
[no audio]