Develop API Requests to Mock Server
Budget: $10 – $30 USD
Set up a mock server
learned how to make API calls to a server. In the next two sprints, you'll learn how to create your own server with a database. You'll also send requests to your server once it's up and running. Until then, we'll run a mock server and write our API calls to that.
Download the db.json file with a database featuring some prepared cards, and place it in the root folder of your project.
?Download db.json
Install a tool called json-server:
npm install -g json-server@^0
Note that on some systems, you may have to preface this command with sudo. The sudo command is used to run a command with elevated permissions. For example:
sudo npm install -g json-server@^0
This command does the same thing as the previous command (but with elevated privileges). One more thing: most likely, you'll be prompted to type your password into the terminal before the command will be executed.
json-server makes it easy to run APIs for demo purposes using a pre-built JSON file. Refer to its documentation for more details.
When working on your project you’ll need to have the json-server API running, as well as your React project, so you’ll need to use two terminal windows. A convenient way to manage this is to use VS Code’s split terminal feature.
The VS Code integrated terminal with the split terminal button emphasized.
In the first terminal you can now run your React app. In the second terminal you can start the JSON server:
json-server --watch db.json --id _id --port 3001
With this command, the server will run on localhost port 3001. If you don't specify a port, the server will run on 3000 by default. Remember: 3000 is the default port for your React application, so we recommend specifying the port using the --port flag.
Make API calls
Once you have json-server installed, review the Getting Started section in the docs. Then, write three API calls in a separate utils/api.js file to the server. The base URL for making the calls is:
const baseUrl = 'http://localhost:3001';
GET /items
All clothing items should be fetched and placed into the application state. Make a GET request:
GET http://localhost:3001/items
Export the contents of api.js to the App component. Modify the corresponding Effect hook to add the items to the application state from the server.
Remove the utils/clothingItems.js file containing the default items that we used in the previous project. From now on, we'll fetch items from the server. Yes, it's a mock server, but it's a server nonetheless!
POST /items
Make a POST request to add a new clothing item:
POST http://localhost:3001/items
Pass name, imageUrl, and weather to the request body. Modify the corresponding handler for adding a new item in App.js.
Note that you’ll need to add a Content-Type: application/json to the POST request, as described in the getting started documentation.
DELETE /items/:id
Write a DELETE request:
DELETE http://localhost:3001/items/:id
Create a corresponding handler for removing an item in the App component.
? Note that the :id segment in this URL represents a variable. The : shouldn’t be included in the final URL.
learned how to make API calls to a server. In the next two sprints, you'll learn how to create your own server with a database. You'll also send requests to your server once it's up and running. Until then, we'll run a mock server and write our API calls to that.
Download the db.json file with a database featuring some prepared cards, and place it in the root folder of your project.
?Download db.json
Install a tool called json-server:
npm install -g json-server@^0
Note that on some systems, you may have to preface this command with sudo. The sudo command is used to run a command with elevated permissions. For example:
sudo npm install -g json-server@^0
This command does the same thing as the previous command (but with elevated privileges). One more thing: most likely, you'll be prompted to type your password into the terminal before the command will be executed.
json-server makes it easy to run APIs for demo purposes using a pre-built JSON file. Refer to its documentation for more details.
When working on your project you’ll need to have the json-server API running, as well as your React project, so you’ll need to use two terminal windows. A convenient way to manage this is to use VS Code’s split terminal feature.
The VS Code integrated terminal with the split terminal button emphasized.
In the first terminal you can now run your React app. In the second terminal you can start the JSON server:
json-server --watch db.json --id _id --port 3001
With this command, the server will run on localhost port 3001. If you don't specify a port, the server will run on 3000 by default. Remember: 3000 is the default port for your React application, so we recommend specifying the port using the --port flag.
Make API calls
Once you have json-server installed, review the Getting Started section in the docs. Then, write three API calls in a separate utils/api.js file to the server. The base URL for making the calls is:
const baseUrl = 'http://localhost:3001';
GET /items
All clothing items should be fetched and placed into the application state. Make a GET request:
GET http://localhost:3001/items
Export the contents of api.js to the App component. Modify the corresponding Effect hook to add the items to the application state from the server.
Remove the utils/clothingItems.js file containing the default items that we used in the previous project. From now on, we'll fetch items from the server. Yes, it's a mock server, but it's a server nonetheless!
POST /items
Make a POST request to add a new clothing item:
POST http://localhost:3001/items
Pass name, imageUrl, and weather to the request body. Modify the corresponding handler for adding a new item in App.js.
Note that you’ll need to add a Content-Type: application/json to the POST request, as described in the getting started documentation.
DELETE /items/:id
Write a DELETE request:
DELETE http://localhost:3001/items/:id
Create a corresponding handler for removing an item in the App component.
? Note that the :id segment in this URL represents a variable. The : shouldn’t be included in the final URL.