Scribd
Upload
55 views2 pages

Exercise 41 - Setting Up A Server Using Json-Server

This document provides instructions for setting up a server using the json-server module to serve application data and static files. Key steps include installing json-server globally, creating a json-server folder with a db.json file, starting the server with json-server commands, and configuring it to serve data from db.json and static files from a public folder. Upon completing these steps, the server will serve REST API data from db.json and images from the public folder to power a React application.

Uploaded by

Nguyễn Mạnh Thắng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views2 pages

Exercise 41 - Setting Up A Server Using Json-Server

This document provides instructions for setting up a server using the json-server module to serve application data and static files. Key steps include installing json-server globally, creating a json-server folder with a db.json file, starting the server with json-server commands, and configuring it to serve data from db.json and static files from a public folder. Upon completing these steps, the server will serve REST API data from db.json and images from the public folder to power a React application.

Uploaded by

Nguyễn Mạnh Thắng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Setting up a Server using json-server

Exercise Resources
db.json

images.zip

Objectives and Outcomes


The Node module, json-server, provides a very simple way to set up a web server that supports a full-
fledged REST API server. It can also serve up static web content from a folder. This lesson will
leverage these two features to provide the back-end for your React application. In this exercise, you will
configure and start a server using json-server to enable serving your application data to your Angular
application. At the end of this exercise, you will be able to:

 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.

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


 At any convenient location on your computer, create a new folder named json-server, and move
to this folder.
 Download the db.json file provided above to this folder.
 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 -p 3001 -d 2000

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

http://localhost:3001/dishes

http://localhost:3001/promotions

1
http://localhost:3001/leaders

http://localhost:3001/feedback

 Type these addresses into the browser address 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 at the following address:

http://localhost:3001/

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

Serving up the Images


 Create a public folder in your json-server folder.
 Download the images.zip file that we provide above, unzip it and move the images folder
containing the images to the public folder.
 Restart the json-server as we did before. Now your server will serve up the images for our React
app. You can view these images by typing the following into your browser address bar:

http://localhost:3001/images/<image name>.png

Conclusions
In this exercise, you learnt how to configure and start a simple server using the json-server node
module. You also learnt how the server can serve up static web content.

You might also like