How to develop REST Web Services in SoapUI and consume in Reactjs

SoapUI is an open-source web service testing application used in developing service-oriented architectures (SOA) and representational state transfer (REST). It offers main functionalities as web service inspection, invoking, development, simulation and mocking, functional testing, load and compliance testing.In SoapUI we can test SOAP and REST web services, JMS, AMF, as well as make any HTTP(S) and JDBC calls.

React is a declarative, efficient and flexible JavaScript library used in building user interfaces.

In this blog, I am going to describe how to develop Rest web services using SoapUI and consume it in a Reactjs application.

1.Develop REST web service using SoapUI

  • As the first step, you need to download and install SoapUI. You can use this, for instructions on downloading and installing SoapUI.
  • Next, open SoapUI editor. A snapshot of SoapUI starter page is given below.
SoapUI Starter Page
  • Make a new REST project using File-New Rest Project. Specify the URI of the new Rest project that is being created in the dialog box that appears.
  • After creating the new project, in the project menu, right click in the Rest service project and add New REST MockService. Specify the name of the REST MockService in the dialog box that appears and click OK. Now you can see the MockService you created under the REST project menu.

A sample REST MockService is shown below.

REST MockService
  • Then, in the project menu, right click on the MockService and select Add new mock action. There you can select the resource path and the HTTP method for your new mock action. The HTTP method can be one of GET, POST, PUT, DELETE, HEAD, OPTIONS, TRACE, PATCH.
  • In our example, we have used /movies/titles as the resource path and GET as the HTTP method.

You can create the mock action as follows.

Mock Action
  • Then, right click on the new mock action you just created and select New MockResponse. Specify a name for the MockResponse and click OK. You can view the mock action and the mock responses you created by double clicking on the respective sections in the project menu.
  • In the Response tab, you can add the requests in XML, Json and text formats. In our example, we have used a Json request.
  • Since we are going to deploy this rest service in reactjs application, you have to define headers too. Note the green plus sign with the tool tip “Adds a custom HTTP header to this message” in the MockResponse editor.
MockResponse editor
  • Enter the following headers there. Add the first part (before the colon, without it) and as value add the second part (after the colon, without spaces).

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST, GET, OPTIONS

  • Additionally for the Access-Control-Allow-Origin header, you can put asterisk instead the URL to allow requests from any port.

Access-Control-Allow-Origin: *

The response you created is shown below.

Response created in MockResponse editor
  • Now double click on the REST MockService. In the editor window that appears click on the gear icon with the tool tip “Sets options for this MockService” where you can define the specified options for the REST mock service created.
  • In the opening window, specify the path, port and host where you need to host the rest service.
REST MockService Options
  • Now start the Rest service by clicking on the Run icon in the REST MockService.
  • Next navigate to your browser window and enter the URL with the specified resource you entered in the REST MockService. The request you developed is now able to be exposed in the browser window.
  • We have created the REST Web service now. Next we will develop the react application in order to render the developed REST web service.

2.Render the web service in Reactjs

There are many types of AJAX/HTTP Request libraries used in calling web services. Some of them are Fetch API, Axios, jQuery $.ajax and Superagent. You can find more information on them from this article. In this blog, I have described on how to use fetch() and axios in consuming the web service in reactjs.

i) Using Fetch API

Fetch is a simple and standardized API that aims to unify fetching across the web and replace XMLHttpRequests.

Following is the example code snippet used in calling the web service via fetch API.

import React from 'react';

class test_REST extends React.Component {
constructor(props) {
super(props);
this.state = {
movies: [],
};
}

componentDidMount() {
fetch("http://localhost:8090/movies/titles").then((Response) => Response.json()).then((findresponse) => {
this.setState({
movies: findresponse.movies,
})
}
)
}


render() {
return (
<div className="container">
{this.state.movies.map((dynamicData, key) =>
<div>

<table>
<tr>
<th>Title</th>
<th>Release Year</th>
</tr>
<tr>
<td>{dynamicData.title}</td>
<td>{dynamicData.releaseYear}</td>
</tr>
</table>
</div>
)}
</div>
);
}
}

export default test_REST;

Here, componentDidMount() function has been used to instantiate the network request and load the data from the remote endpoint which has been specified in the fetch URL. In .fetch() function there is a two-step process used when handling JSON data. The first is to make the actual request and then the second is to call the .json() method on the response.

ii) Using axios

Axios is a JavaScript library that is used to make HTTP requests from node.js or XMLHttpRequests from the browser and it supports the Promise API. Axios allow performing transforms on data before request is made or after response is received. Also it allow you to alter the request or response entirely (headers as well) and perform asynchronous operations before request is made or before Promise settles. Axios has built-in XSRF protection. Another feature that it has over .fetch() is that it performs automatic transforms of JSON data.

Axios can be installed and used with node modules using one of the following methods.

  • Using npm:
$ npm install axios
  • Using bower:
$ bower install axios
  • Using cdn:
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>

Following is the example code snippet used in calling the web service via axios.

import React from 'react';
import axios from 'axios';

class test_REST extends React.Component {
constructor(props) {
super(props);
this.state = {
movies: [],
};
}

componentDidMount() {
var th = this;
this.serverRequest =
axios.get("http://localhost:8090/movies/titles")
.then(function (result) {
console.log(result)
th.setState({
movies: result.data.movies
});
})
}


componentWillUnmount() {
this.serverRequest.abort();
}

render() {
return (
<div>
{this.state.movies.map((dynamicData, key) =>
<div>
<table>
<tr>
<th>Title</th>
<th>Release Year</th>
</tr>
<tr>
<td>{dynamicData.title}</td>
<td>{dynamicData.releaseYear}</td>
</tr>
</table>
</div>
)}
</div>
);
}
}

export default test_REST;

As in fetch(), componentDidMount() function has been used to instantiate the network request(serverRequest) and load the data. Additionally, componentWillUnmount() is used to perform any necessary cleanup, such as invalidating timers, canceling network requests or cleaning up any DOM elements that were created in componentDidMount.

Following is the reactjs rendered output in the browser window.

Now we have successfully rendered the developed REST service in the browser. Hope you got a clear understanding on how to develop REST service in SoapUI and consume it in Reactjs. If you have any issues or comments on this blog post please leave a comment below. I will address them as soon as I get time.

Engineer — Big Data & Data Science