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.

You can copy ./public/config-sample.json to ./public/config.json and adopt the settings to your liking.

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 changing\adding 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 changing\adding 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 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
  },
  ...
}

delete

The delete method will be used to delete an existing item in your API resource.

Example:

{
  "delete": {
    "url": "/character/:id"
  }
}

Pagination

The pagination property allows you to handle pagination on .

Here's a list of variable names you may change:

Name	Value	Description
type	'buttons' | 'infinite-scroll'	Type of pagination. Buttons is the standard one. You can also have a "inifite scroll" with lazy loading.
source	'query'	Where the pagination parameters are written to. Only supports query parameters for now.
params	object	Parameters definition for pagniation purposes. See below.
fields	object	Definition of informations that will be returned by the API. See below.

The params field has the following properties that all can be defined with a input field

Name	Value	Required?	Description
page	object	true	The parameter definition of the page number.
limit	object	false	The parameter definition of the maximum number of items to be returned by the API.
sortBy	object	false	The parameter definition of the sorting value.
descending	object	false	The parameter definition of the order in which the API should return items. false by default.