Submodule 22.2: Setting up a Server using json-server

Introduction

The Node module, json-server, provides a very simple way to set up a web server. It can serve up static web content from a folder. This submodule will leverage this feature to provide the back-end for the Angular application. You will:

• Configure and start a simple server using the json-server module
• Configure your server to serve up static web content stored in a folder named public.

See more about json-server

Installing json-server

json-server is a node module, and hence can be installed globally by typing the following at the command prompt:

npm install json-server -g

If you are using OSX or Linux, use sudo at the front of the command. This will install json-server that can be started from the command line from any folder on your computer.

Configuring the Server

Go to your folder location on your desktop and ...

• create a sub-folder with the name jsonServer
• Download in this folder the db.json file

Move to this folder in your terminal window, and type the following at the command prompt to start the server:

 json-server --watch db.json

This should start up a server at port number 3000 on your machine. The data from this server can be accessed by typing the following addresses into your browser address bar:

http://localhost:3000/dishes
http://localhost:3000/leaders
http://localhost:3000/feedback

Type these addresses into the browser address bar and see the JSON data being served up by the server. This data is obtained from the db.json file
The json-server also provides a static web server. Any resources that you put in a folder named public in the json-server folder above, will be served by the server:

The public folder

You will now update the json-server to enable it to serve up resources from its public folder.

Go to the jsonServer folder and create a folder in there and named it public

Download the images.zip file, unzip it and move the images folder to the public folder that you created above

Restart your json-server by typing in the terminal  json-server --watch db.json.

You can access your images by typing in the browser address bar  localhost:3000/images/almonds.jpg f.e.

End

Shut down the server by typing ctrl-C in the terminal window.

See about Creating demo APIs with json-server