How to Mock ONLINE APIs without setting up a server
Tags: webdev, tutorial, productivity, beginners
Published: 2022-11-22 12:10:46

There are many approaches to mock JSON data and use it offline. But if you need some **online** data in your app, you'll have to run a mock server in your own cloud server.
That's not easy, especially for front-end developers.
But now, there is a fantastic way to start a mock server on the cloud, easily and free.

## Why Mock APIs Online

In local development, offline mock data is enough for front-end developers. But there are some common scenarios where offline mock data is not good enough.

### Scenario 1: Team shared mock data

Some data structure is complicated, maybe with many fields or following complex schemas. If several developers need the same mock API, the best solution is to build one online mock server that everyone can visit.
For teams, shared online mock data would accelerate their development a lot. Mock data can be defined only once.

### Scenario 2: APIs under development

In many teams, APIs are not designed well at the beginning. An initial specification of how the API responses should look like is likely to change while it is developed for real. An offline mock data will soon be different from the real API responses.
So, online mock data following backend API specifications would be great.

## How to mock it

In my previous articles, I introduced how to mock dynamic data on a local server rapidly in the tool [Apidog](http://www.apidog.com/?utm_source=dev_to&utm_medium=IsmailKamil&utm_content=Mock_online_API_in_one_minute).
And now I find that mocking on a cloud server is also easy and free!

### Step 1: Import API definitions

API documentation is necessary. OpenAPI (Swagger) is best, and any other format is OK, too.

Create a new project in [Apidog]([Apidog](http://www.apidog.com/?utm_source=dev_to&utm_medium=IsmailKamil&utm_content=Mock_online_API_in_one_minute)).

![Create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgfoi8b131h0s1q1kbre.png)

Go to "Settings"-"Import", and drag your API file in.

![Import API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skl2ph7m1te8orrlf61r.png)

More than ten formats of API documentation are supported. Click "Next" and your API will be imported.

### Step 2: Turn on the cloud mock server

Go to "Settings"-"Feature Settings"-"Mock Settings", and turn on the "Cloud Mock" switch.
Cloud mock can be accessed open, or you can set a token for it.

![Turn on cloud mock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gedgs787oahnn2v6jl8v.png)

### Step 3: Get the mock URL

Click an API in Apidog. You'll see an API definition page, in which there is a section named "Mock". Copy the URL in the "Cloud Mock" part which starts with "mock.apidog.com".

![Mock URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt3rc00fc0qp9xef1ia8.png)

Paste it into your browser.

OK, it's done! You'll see a mocking JSON!

![Mocking JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq8g35ei9ts05vqfi31a.png)

A "city" field is filled by a city name, an "id" field is filled by an integer, and "status" is a enum field.

Now you can use the API data in your app, and anyone in the team can access this URL to get data.

Still, you don't need to write any scripts. Data in all fields are generated automatically.

And when you click "reload" in the browser, the data will refresh.

![Mocking JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m93iaerfatwr6zmr0iqz.png)

## APIs under development

This approach solved the team-shared mock data scenario. But if the API is still under development, how can the other developers get the latest mock data?

The solution is also in Apidog. Apidog is an all-in-one API developing toolkit, so the backend developers can use it to debug the APIs like in Postman and specify APIs like in Stoplight. Apidog can synchronize Swagger automatically so API specifications can be kept the latest. When API specifications change, the online mock data changes synchronizing.

It's a perfect API developing toolkit for teamwork.

You can [register or download Apidog](http://www.apidog.com/?utm_source=dev_to&utm_medium=IsmailKamil&utm_content=Mock_online_API_in_one_minute) here.