- [Instructor] Everything looks probably split up now,
but we actually cheated a little bit.
We're still serving all the images related to the speakers
from the main app; you see them all even
in public images and there we have this artwork folder
that contains all this artwork for a given speaker
and we also have a folder speakers with the speakers
image that are called after their short names
and there is also this extension for
the thumbnail underscore tn.
Of course, everything related to the speaker
should come from the responsible service,
so we need a way to fetch images
from the service now as well.
Let's get started by moving over all those images.
So that's in images speakers images artwork.
So I'm copying those two files,
I'm heading over to the speakers service,
and there I now copy them into a new folder in data images.
And they're in.
You may now expect that we will create routes
on this service to serve those images now,
but actually they express data middle where
that will just perfectly do this job.
So what I will do now is
I will just go into server service.js
and at the very top before the routes start
I will now add service dot use and it's for the path,
images slash and for that we now want to use express.static
and this should be a config variable
that should be config dot data dot images of course
we have to create this config variable now
so I go into config index.js and there I can just
copy the path to json,
call it images,
and the path should be slash images,
and I copy it over to the production configuration as well.
Now let's see if this works,
so I'm starting the service, and we again have to pick
the port that it is using, so at 64914,
and let's open that in the browser, so it's localhost 64914
again you have to pick the port that you have,
slash images, speakers, and there I want Hillary underscore
Goldwynn dot jpg and you see that the service now serves
this speaker's image from static.
That works so far, next we have to add
the respective route to the conference app
so I'm adding back to the conference app and there
we can first remove those speakers images
is speakers in artwork, can move it to trash,
and now we have to extend our speakers js class
to be able to serve images and for that we add
a new method that should be async
get image for a given path.
Again I have to call for the service
into an http call so I'm just copying that from get names,
and now I want to get slash images
slash dollar curly brackets path and we have
to make one very major change here now;
the response type should be a stream because
it's a binary file and we want to stream it.
Before the conference app served those images
using its static middleware, now of course we have
to create the route that will deliver us
this images call get image, so I'm going into routes
in index.js and there I will simply add a new route.
Router dot get and it will be slash images
and the type this means is it speakers or artwork
and also the filename and we're
async, request, response, and next.
And there we have a try catch block again,
and we have to return next error,
and in the try block
I will now simply call const image equals await speakers
get image and the path we are using
is dollar curly brackets request dot params dot type
and slash dollar request dollar params dot file.
And then we call return image so that's image
we just got and because it's a stream we can do dot pipe,
and we pipe it into the response object.
Now let's start the conference app,
open the page again, and let's reload.
And we see that we are serving images here
and they have to come from the service obviously
because we removed them from the conference app.
Let's look into the speaker service real quick,
and we see that we are requesting the images now from there.
We have now split up all
the functionality related to speakers.
This service now lives completely on its own
and can be tested and extended independently
of the main app and this is one of
the main selling points of microservice architectures.