↓Skip to main content
Dev Blog Dev Blog
  1. All Posts/

RESTool

Tools TypeScript

RESTool 2.0 (demo)

The best tool in the neighborhood. Managing your RESTful APIs has never been so easy.
RESTool gives you an out of the box UI that connects to your RESTful API with a simple configuration file.
The idea behind it is simple. Given the fact that each entity in your API has a RESTful implementation, RESTool will provide you UI tool for managing these entities in no time by simply editing a configuration file. No front end engineers, no JavaScript, no CSS, no html. Just a simple JSON file.
Live Demo: https://dsternlicht.github.io/RESTool/

What’s New in V2?

While RESTool originally was developed with Angular, we decided to rewrite it from scratch and move to React. The main reason we moved to React is the community. Since React is so popular we believe that choosing React over Angular will get a much wider community support.
Some new features and capabilities in V2:

  • From Angular to React & Typescript
  • Full mobile support
  • Cards layout
  • Custom app colors
  • Data path extraction from arrays
  • New & improved design
  • Custom favicon support
  • Custom icons for actions
  • Better error handling in configuration and requests

Getting started

If you only interested in using RESTool on its latest version as a management tool for your RESTful API, read the docs about configuration, deployment, and consuming RESTool from CDN.
If you wish to extend RESTool’s functionality and develop on top of it, please go to the development section.

Configuration

One of the best things about RESTool (and the reason we actually built it) is that you don’t need to develop anything. Everything is configurable and may be set simply by editing a configuration file (config.json).
The config.json file should be placed in the root folder of the project, alongside with the index.html file.
Here’s a detailed list of properties you could add to your configuration file (just in case, we added a config-sample.json file you could learn from).

Property
Type
Required?
Description

name
string
true
The name of your app.

pages
array
true
A list of pages in your app, each page will be presented as a separated tab, and will have his own methods and properties.

baseUrl
string
false
Base url of the api. This will prefix the url of all the api methods defined for all pages. This is normally the domain plus a base path. For example: "https://restool-sample-app.herokuapp.com/api" Note: If different pages use different base urls this should not be used. Instead, you should explicitly define absolute urls for each method.

requestHeaders
object
false
A list of key-value headers you wish to add to every request we’re making. For example: { Authentication: 'SECRET_KEY', 'X-USER-ID': 'USER_ID' }.

errorMessageDataPath
string[]
false
The path within an error response object to look for an error message. If multiple are provided, each will be tried in order until a message is found.

unauthorizedRedirectUrl
string
false
Path to navigate to when the api returns a 401 (Unauthorized) error. You can use :returnUrl to pass a return location. For example: "/login/myLoginPage?return=:returnUrl"

favicon
string
false
A URL for you app’s favicon.

customStyles
object
false
Custom styles

customLabels
object
false
Custom labels

customLink
string
false
External Link for navigation item (instead of default page app)

Dynamic configuration file

RESTool also support dynamic js configuration file.
Just replace the config.json file with config.js file with this content:

export default {
  // Content is the same as the json config file
}

NOTE: In case you’re using the build folder, the config.js must be placed in the folder /build/static/js.

Pages

Each page is an object and represents a resource in your API. It should have the following properties:

Property
Type
Required?
Description

name
string
true
The name of the page. This will be presented in the menu.

id
string
true
A unique identifier for the page. RESTool will use it to navigate between pages.

description
string
false
A short description about the page and its usage.

requestHeaders
object
false
A list of key-value headers you wish to add to every request we’re making. For example: { Authentication: 'SECRET_KEY', 'X-USER-ID': 'USER_ID' }.

methods
object
true
A list of all methods which are available in your RESTful API.

customActions
object[]
false
A list of extra (non RESTful) endpoints available in your RESTful API. Specifically customActions is a list of PUT or POST method objects. Read more about custom actions here.

customLabels
object
false
Custom labels

Methods

A method object will tell RESTool how to work with your API. Available methods:

  • getAll
  • getSingle
  • post
  • put
  • delete

Each method has the following common properties (which could be extended specifically for each use case):

Property
Type
Required?
Description

url
string
true
The url for making the request. The url could be either relative or absolute. If a baseUrl is defined then you should only provide a relative path. For example: /users/:id. The url could contain parameters that will be extracted if needed. For example: https://website.com/users/:id – note that the parameter name in the url should match the one you’re returning in your API.

actualMethod

string (“get”, “put”, “post”, “delete”, “patch”)
false
Since not everyone implements the RESTful standard, if you need to make a ‘post’ request in order to update an exiting document, you may use this property.

requestHeaders
object
false
Same as above, but for specific method.

queryParams
array
false
An array of query parameters fields that will be added to the request. If your url includes the name of the parameter, it will be used as part of the path rather than as a query parameter. For example if your url is /api/contact/234/address you might make a parameter called contactId then set the url as follows: /api/contact/:contactId/address. Each query param item is an object. See input fields

fields
array
false
A list of Input fields that will be used as the body of the request. For the getAll request, the fields will be a list to display fields and will be used to render the main view.

getAll – additional properties

We’ll use this request in order to get a list of items from our API. This type of GET request has the following additional properties:

dataPath (string)

Use this field to let RESTool know from where it should extract the data from. For example, if your API is returning the following JSON response:


{
  success: true,
  data: []
}

The dataPath you’ll want to use will be data.
If your API returning:


{
  success: true,
  data: {
    created: 1578314296120,
    items: []
  }
}

The dataPath will be data.items.

display (object: { type: “table” | “cards” })

RESTool allows you to control how to output the data. The display object has a type property that will define how to display the data. RESTool supports two display type: "table" and "cards".

{
  "display": {
    "type": "cards"
  },
  ...
}
sortBy (string | string[])

One or more paths to properties in the result object to sort the list by.

pagination (Pagination)

Optional. This allows to handle pagination. See Pagination.

dataTransform (Function | async Function)

Optional. Relevant only when using dynamic (js) config.
A function to allow manipulation on the response data.
Useful for changingadding data for display purposes.
Here is an example for adding a new field named wiki to the data:

{
  ...
  "dataTransform": items => items.map(item => Object.assign(item, { wiki: `https://en.wikipedia.org/wiki/${item.name}` }))
}
getSingle

This method will be fired once you hit the edit button on an item in order to get a single item’s data. By default, if this method hasn’t been set, when editing an item, RESTool will take the raw data from the original getAll request.
An example of a getSingle request:

{
  "url": "/character/:id",
  "dataPath": "data",
  "queryParams": [],
  "requestHeaders": {}
}
dataTransform (Function | async Function)

Optional. Relevant only when using dynamic (js) config.
A function to allow manipulation on the response data.
Useful for changingadding data for display purposes.
Here is an example for adding a new field named wiki to the data:

{
  ...
  "dataTransform": item => Object.assign(item, { wiki: `https://en.wikipedia.org/wiki/${item.name}` })
}
post

The post method will be used to create new items in your API resource.
Example:

{
  "url": "/character",
  "fields": [
    {
      "name": "name",
      "label": "Name",
      "type": "text"
    },
    {
      "name": "location",
      "label": "Location",
      "type": "select",
      "options": ["Kings Landing", "Beyond the Wall", "Winterfell"]
    },
    {
      "name": "isAlive",
      "label": "Alive?",
      "type": "boolean"
    }		
  ]
}
dataTransform (Function | async Function)

Optional. Relevant only when using dynamic (js) config.
A function to allow manipulation on the data before making the request.
Here is an example for transforming an array of ids into an array of objects.

{
  ...
  "dataTransform": (body) => {
    body.character.ids = body.character.ids.map((id) => {
      return {
        id: id,
      }
    })
    return body
  },
  ...
}
put – additional properties

The put method will be used to update an existing item in your API resource.
Example:

{
  "put": {
    "url": "/character/:id",
    "actualMethod": "post",
    "includeOriginalFields": false,
    "fields": [
      {
        "name": "location",
        "label": "Location",
        "type": "select",
        "options": ["Kings Landing", "Beyond the Wall", "Winterfell"]
      },
      {
        "name": "isAlive",
        "label": "Alive?",
        "type": "boolean"
      }
    ]
  }
}
includeOriginalFields (boolean)

When set to true, all fields from the original object are merged and sent in the request body.
Default is false.

dataTransform (Function | async Function)

Optional. Relevant…



↑