In this video we're going to start to set up this Jason server as our API server for our project.
So I'm going to flip back over to my terminal now I want you to recall that at present we have our application
running inside of one terminal window.
I'm going to start up a second terminal window and navigate to my stream's directory.
So this is a second terminal window that it's running.
In addition to the one that is running my Reebok server and inside the streams directory I see that
client project right there.
So inside of streams we are going to create a second project folder and the second project folder is
going to hold all the code related to the JS on server or the API server that we are trying to set up.
So these are going to be two completely separate servers.
All right so inside my streams directory I'm going to make a new folder called simply server.
Let's call it API.
It doesn't really matter what we call it.
And then all change into that directory.
Then inside if you're going to start to generate a new package not just on file by running the command
NPM in it.
When I enter that command I'm going to be asked a series of questions here.
I'm going to hit enter enter enter like so now after we run it like that we can then list out the files
inside of the API directory and we'll see the package shapes on file.
So the reason we just generated a package such a file is so that we can install this Jaison server library.
So back inside my terminal I'm not going to run an install desktop save Jason Desch server like so.
All right.
That's just going to take a second or two to install some skin to let it do its thing after that is
all done installing and then going to auto open up my code editor inside the API directory.
Right now our code editor isn't open.
Inside the client directory.
So inside of API we're going to open up my code editor.
All right.
Perfect.
Now I'm going to flip back over to the Jay Sun server documentation really quickly if you scroll down
just a little bit you'll notice that this thing essentially says we can create a D-B chase on file and
then any record so we try to save this API server will be automatically stored inside of this DVD case
on file.
So you and I are going to draft out a quick little DVD on file that is only going to have a resource
type of streams.
So inside of the API directory I'm going to make a new file called D-B.
Jason and then inside of here we're going to write out some Jaison now Jaison is not javascript even
though it's going to look really similar to it inside of here we're going to make an empty object that
has a key of stream's.
Notice how I am using double quotes here.
You have to use double quotes inside of Jaison for any key and we'll say that this is going to be an
empty array.
So as we start to create some streams inside of our application those streams are going to be added
as just some records to this array right here.
And over time you're going to see that this chase on file automatically gets some more data added to
it as we use our application.
So you can you essentially imagine this D-B that some file is like an actual database.
It's not a real database but it's serving as a database.
So we're going to save this file and then we're going to open up our package not just on file inside
if you're going to find the script section and I'm going to delete the default script of test we're
going to write a new script inside of it that's going to start up and run the Jaison server to do so.
We're going to add on a new script with the name of start again making sure that we use double quotes
here and then for the value we're going to put in Jason dash server dash P three thousand and one dash
deep WCSB D-B Jaison like so.
So this is going to start up the JS on server running on port three thousand one and it's going to watch
the DB database on file for any changes that get made to it.
So now we can save this we can close the package not just on file.
I'm going to close the DVD case on file and then I'm going to close my editor I opened up inside the
API directory.
That's literally all the code we have to write to get the DBI or the API server up and running.
Now flip back over to my terminal still inside the API directory and inside of here I'm going to run
NPM start like so.
And that's pretty much it.
So you'll notice that we now have a listed resource here at localhost three thousand one slash streams.
So now we can make use of this chase on server to manipulate the list of streams that are stored inside
the API server.
By following all of these restful conventions.
So if we want to get a list of all of our streams we are going to make a get request to localhost three
thousand one slash streams if we want to get a particular stream we'll make a request to localhost three
thousand one stream slash ID if we want to delete a stream we'll make a delete type request to slot
local host three thousand one streams slash and then the ID of the record we want to delete.
So like I said really easy to get started with.
JS on server and because it follows these restful connections so closely as long as you understand the
restful conventions you don't have to look at any documentation whatsoever you just are going to follow
these conventions and you will be able to work with all the records that are stored by that D-B server.
All right now lesing want to mention here is that from now on inside this application we're now going
to be running two separate terminal windows.
We've got one terminal window for our re-act application and one window for RJC on server.
So if for any reason you have to stop working on this application and come back to it at some point
in the future you're going to open up to terminal windows one inside the API directory.
And then one inside the client directory and inside both these windows you're going to run NPM start.
I don't do that right now because you'll probably see an error message but you get the idea if you ever
start this again in the future and people start in both client and API.
All right.
So this looks great.
We've now got an API server to store our list of streams.
So let's take a quick pause.
When we come back the next video we're going to make sure that from our stream it creates a component
whenever a user submits our form.
We attempt to make a post request to our API server and create a new stream record.