In order to further develop our application,
we want to setup a simple server
that will serve up our data that is required by our application.
So far, we haven't learned enough about how
we can set up a server that will serve up a REST API.
Instead, we will make use of a simple node module called json-server,
which helps us to quickly set up a simple server that will serve up data that is given
to it in the form of a JSON file and also
serve up images that might be required by our application.
So, to get started,
let's proceed forward to install the json-server node module,
and thereafter, setup our json-server in this exercise.
To get started, go to your convenient location
on your computer and create a folder named json-server.
The reason why I create this folder is that I can store all the files
that are required by my json-server into this particular folder.
Thereafter, we will install the json-server npm module as a global MPM module.
So, to do that,
at the prompt in your terminal,
type npm install minus g json-server,
and then let that complete the installation
of the json-server npm module as a global module.
Now, in case you are doing this on a Linux or a Mac,
make sure to use sudo in front of it.
Once the installation is complete,
go to the instructions for setting up the json-server,
and there, we provide a file named db.json.
Download this file and name it as db.json and move this file
to the json-server folder that you have created in the previous step.
You now see that I have already downloaded the db.json
file and then move that db.json file into the json-server folder.
In addition, I have also created another folder,
inside the json-server folder, named public.
Now, whatever we put in this public folder will be made available by
our json-server as a resource that can be downloaded from our server.
Thus, our json-server acts as a simple static web server that can help us
to serve up any resources like images or even a whole website.
If you want to, you can copy that into the public folder and make it
available to be served up by the json-server and viewed in a browser.
Next, again, go to the instructions,
and then download this zip file name images.zip,
and then unzip this file,
and then you will obtain a folder named images,
which contains a set of PNG images that we will make use of within our application.
So, once the images folder is ready,
move that images folder to the public folder that we have
just created in the json-server folder.
Going to our folder,
you'll see that inside the public folder,
I have already move the images subfolder into the public folder here,
and this contains all the images that will be useful for my application.
To start up your json-server,
go to the json-server folder in your terminal and at the prompt,
type json-server and minus minus watch db.json.
The reason for using this watch flag
is that this json-server will keep a watch on the bb.json file,
and anytime the db.json file is modified,
it will reload the db.json file and start serving up the modified data from the server.
In addition, we can also give a minus d flag with a value,
say, for example, 2,000,
which means that when the server receives a request,
it will serve the data back to the requester after a 2-second delay.
Now, this would be used to simulate delay in accessing a server over the Internet.
So, that's the reason why I would also suggest to use the minus d
2,000 flag for the json-server.
So, let's start up our json-server,
and then you will notice that the json-server starts up
and declares all the resources that are available from the json-server.
So, you can see that it has a set of resources that are available at all these URLs.
In addition, the public static server that serves up
static data is available at this URL, localhost:3000.
Now, you can go to any browser and then if you type in
localhost:3000 and slash dishes,
you will see that this will start serving up our data in the form of JSON array here.
So, this will be useful for our application.
Similarly, you can type leaders,
and you will see, again,
the data being served up and so on.
If you type in the localhost:3000,
you will see that the server will serve up
the data as a static server and then currently, it is empty.
Now, if you want to access the images that are available from the server,
I can just type images and type in the name of a PNG file,
and then you will see that it'll serve up the corresponding image.
Now, this is very useful for us,
as we develop our application in this course.
With this, we complete this exercise,
where we have set up a simple server called the json-server to serve up
data and support a REST API that we can access from our application.