We frontend developers are faced with a common task, which is to simulate a REST service or backend REST API to deliver some data in JSON format to the frontend application and make sure everything works as expected. This is because the backend services are often not ready when the frontend team has to start their development. Because of time, we cannot wait, and we must begin to display information to the client even if it is simulated. Of course, we can set up a complete backend server, for example, using Node.js, Express, and MongoDB. However, as we said before, we don’t have time, and this is when the following question arises: How to realize CRUD functionality without creating your backend service? In this tutorial, we will see how to set up and use a fake REST API server using . Which we can use while developing a web application with React. json-server What is json-server? provides a full fake REST API that requires no configuration or coding. With its help, we can quickly and easily set up a backend for prototyping and mocking without worrying about the underlying logic. json-server This way, we can focus more on developing the front end and less on configuring the back end. . Learn all about the json-server here Developing a CRUD App with React Setting Up json-server To start using , we install the package with the following command: json-server npm install -g json-server We create a JSON file called with some data as your requirement needs. For example, in my case, I need some JSON data with user information like , , , etc. Like the following: db.js id name username Now to get the server up from the terminal, run the following command: json-server --watch db.json With this, we should have the server ready at . Now we can make REST requests to this endpoint, as shown in the following image: http://localhost:3000 The REST API that we are going to create will be perfectly functional, that is, it will perform all possible operations on our data (reading, modifying, inserting, and deleting), storing the data in the JSON file. The persistence of the data is done in the JSON text file itself. In this way, in future access to the web application, the API will remember its state keeping all the activity that has been done over time. Setting up React app We create our application with the following command: npx create-react-app myApp After that, we create the following structure for the project: src/
├── api/
│   └── db.json
├── components/
│   └── CrudUSer.js
│   └── DropCompanies.js
│   └── Form.js
│   └── Table.jsx
├── helpers/
│   └── httpHelper.js
├── styles/
│   └── App.css
├── App.js
└── index.js Now that we have created a react application, we need to move our server to another port since the react application is already occupying . port 3000 We do this with the following command, and we will take the opportunity to create a custom command in the manifest file scripts. "server": "json-server --watch src/api/db.json --port 5000" Making requests to the fake API Before making any request, we need to raise our server, to do that, we execute the following command: npm run server GET request Let’s start by making a GET request to the REST URL. Within the JSON file, we have defined a user’s endpoint that contains information related to the users. By making a GET request to the URL , it should display the existing information. http://localhost:5000/users For this tutorial, we add a relation of users and companies each user belongs to a company with . We can make this query as follows: json-server POST request To add new information to the existing information, we will make a POST request to the URL . Here is what the POST request would look like: http://localhost:5000/users Try making a GET request, and you should have the newly added information in the file. db.json DELETE request To delete an entry from the data, you need to send a DELETE request to the API endpoint with the user id. For example, to delete the user with id 1, you need to send a DELETE request to the endpoint json-server http://localhost:5000/users/7 Once it’s deleted, try to make a GET request, and the user with id 7 should not be in the returned JSON. UPDATE request To update an existing entry, you need to send a PATCH / PUT request with the details that need to be updated for that particular entry. For example, to update the details for the user with the id , we will send a PUT request to the URL as shown: 1 http://localhost:5000/users/1 Creating an HTTP helper I have created the helper , with which we will make the different HTTP requests that we need. The idea is to have a mini-library that allows us to simplify the requests from react components. helpers/httpHelper.js You could use this helper in any of your projects with any js framework or just with vanilla js: export const httpHelper = () => {
  const customFetch = async (url, options = {}) => {
    const defaultMethod = "GET"
    const defaultHeaders = {
      "Content-Type": "application/json",
      Accept: "application/json",
    }
    const controller = new AbortController()
    options.signal = controller.signal

    options.method = options.method || defaultMethod
    options.headers = options.headers ?
      {
        ...defaultHeaders,
        ...options.headers
      } :
      defaultHeaders

    options.body = JSON.stringify(options.body) || false
    if (!options.body) delete options.body

    setTimeout(() => {
      controller.abort()
    }, 3000)

    try {
      const response = await fetch(url, options)
      return await response.json()
    } catch (err) {
      return err
    }
  }

  const get = (url, options = {}) => customFetch(url, options)

  const post = (url, options) => {
    options.method = "POST"
    return customFetch(url, options)
  }

  const put = (url, options) => {
    options.method = "PUT"
    return customFetch(url, options)
  }

  const del = (url, options) => {
    options.method = "DELETE"
    return customFetch(url, options)
  }

  return {
    get,
    post,
    put,
    del,
  }
} The function. It is an asynchronous function that receives as parameters the URL to make the request and an options object. If we do not receive the options parameter, this will be an empty object, and we will assign the default values as the method and headers. Otherwise, we replace or concatenate the received values with the default values. customFetch() In addition, we have another property called AbortController which will allow us to abort the request after a certain time if the server does not give us a response. Finally, we make the fetch request with the URL to consult and the generated options, and we return the answer. Now that we have a custom function that allows us to make any type of request, we will create a function for each HTTP verb that we need, and we will send it to call our . customFetch() Finally, we export the functions that make the HTTP queries to be able to use them from our react components. Consuming the fake API from react To easily consume the fake API, for this tutorial, I have created a component that will have all the requests to make and their states of them and will share them with the other components. You could adapt this component or create your own depending on how your app works or add it to a global state. We import and execute our helper . httpHelper() Create a function for each request passing the necessary parameters. These parameters will be obtained from the front end, for example, from the form to create a user. We will pass these functions and the states to the components that need them, in this case, we only have the the component that we use to create a user and to update a user and the the component that shows us the list of users. <Form/> <Table/> You can find these components in the shared repository below, there is not much to explain about these components since what we are interested in is how to create and consume a REST API. That’s it! We have our simple CRUD working, and it looks like this: https://github.com/ljaviertovar/jsonserver-api-rest Conclusion In this tutorial, we learned how to make a backend, in this case, a REST API, quickly available for consumption. With this, we don’t need to wait for the backend team to be able to start our development and start displaying information in our application. We saw how to use REST APIs with to create a dummy database. We learned how to make requests to add, update, modify, and delete data. We also created a helper to make HTTP requests that we can use in any project. json-server Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch before making any investment decisions or decisions regarding you health or security. (Do not regard any of this content as professional investment advice, or health advice)

How to Reduce Response Times and Improve Performance with Redis Caching

How to Simulate a Backend REST API with json-server for CRUD Development in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Using React Router v6 for Private and Public Routes with Access Validation

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Using React Router v6 for Private and Public Routes with Access Validation

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps