Modern UI Service Interaction

Now that you see how the infrastructure and onboarding have changed to support our multi-tenant model, let’s look at the code a bit more to get a sense of how our new client is interacting with the services of our monolithic services (via the API Gateway). While the backend of our application continues to run in silos, our client application has no silo awarens. It simply sends HTTP requests to the API Gateway with our tenant context and all the downstream constructs take care of routing our traffic to the appropriate location. This will be more critical as we start to introduce new serverless microservices in Lab 3.

Let’s start our trace from the client to the server by looking at some code in the React application. To get to this code, you’ll need to open Cloud9 in the AWS console again and open the environment for this workshop. Now, navigate to the /lab2/client/src/components/products/actions folder in the navigation pane on the left. Double-click on the index.js file to view its contents. Within this file, you’ll find a “deleteProduct” function that appears as follows:

export const deleteProduct = (product) => {
    return function(dispatch) {
        const url = `${config.api.base_url}/products/${product.id}`;
        
        /*
        Axios.delete(url, { data: product })
            .then(() => {
                dispatch(deleteProductFinished(product));
            }, error => console.error(error))
            .then(() => {
                dispatch(closeModal());
            }, error => console.error(error));
        */
    };
};

This function is called whenever the client indicates that they want to invoke the DELETE REST method of the Product service. You’ll see here that the actual invocation of this method has been disabled. We’ll need to un-comment the block of code that makes the call as the first step in repairing this broken path in our application.