Mocking data

Sometimes, you might not wish to immediately connect your data source to UI Bakery. There could be various reasons for this, such as the data source not being publicly accessible, having certain security restrictions, or simply feeling a bit lazy. We completely understand these situations as we've experienced them ourselves! In this article, we will describe a couple of common methods that demonstrate how you can mock your data in UI Bakery.

Using Custom Code action type

The simplest way to mock data is to create an action of JavaScript Code type, that will return the needed JSON object. For instance, if your API/DB table lists cars, you can do in the following way:

Mocking data using JavaScript Code in UI Bakery

The action can be then referenced in different UI Bakery fields using standard {{actions.newAction.data}} approach.

If you would also like to emulate the latency when requesting your data source, you can use Promises and setTimeout to return your data. For instance, your JS action can have the following code:

const fakeData = { id: 1, car: 'Mitsubishi', car_model: 'Montero', car_color: 'Yellow', car_model_year: 2002, car_vin: 'SAJWJ0FF3F8321657', price: '$2814.46', availability: false };
const delay = 2000;

return new Promise((resolve, reject) => {
  setTimeout(() => resolve(fakeData), delay);
});

One of the major benefits of using JavaScript Code action step is that you can easily replace your action with real data by simply changing the action type when you connect a real data source.

Using state variables

State variables are a great way of mocking data when you not only want to mock reading data but also writing. We have a separate article on State Variables. You can find the link to it below:

App State variables

Google Spreadsheets instead of SQL databases

SQL databases are often the data source that people are most reluctant to expose publicly. Fortunately, Google Spreadsheets function in a manner very similar to SQL databases within UI Bakery. This allows you to conveniently create a Spreadsheet, where each Sheet can be considered as a table, and the Cells in the First Row can act as SQL columns:

Example Google Spreadsheet with Mock data

After SpreadSheet is created, you can connect it as a Data Source and Create Actions to retrieve and write data to it.

Mock HTTP API with JSON-server

JSON-Server is an npm package that you can run locally or on a remote server which provides a simple interface to create fake JSON API. You can create Mock API using 3 easy steps.

1. Install JSON-server package:

   npm install -g json-server

2. Create db.json file with similar format:

   {
     "posts": [
       { "id": 1, "title": "json-server", "author": "typicode" }
     ],
     "comments": [
       { "id": 1, "body": "some comment", "postId": 1 }
     ],
     "profile": { "name": "typicode" }
   }

3. Run JSON server:

   json-server --watch db.json

UI Bakery's Test data source

Don't forget that you can always use UI Bakery's test data sources which are available right in the Data Source connect dialog:

UI Bakery Test Data Sources

Extra 1: Using UI Bakery's self-hosted version

When your data sources are only accessible from a local network, you can also install UI Bakery's self-hosted version and access it from there. UI Bakery self-hosted is easy to install and run. You can read more about it using the link below:

UI Bakery self-hosted

Extra 2: Using NgRok to proxy data sources

NgRok is a product that creates a secure tunnel from your data source to the internet. You can read more about it using the link below:

Connecting local databases using ngrok