Communicate with the Backend

In the Business Buddy app, the Products and Settings dashboard pages communicate with an app backend to work with the OpenAI API and to store user settings.

In general, you communicate with a backend server from a Wix App the same way you would in any other type of app.

You do, however, need to pay special attention in order to:

  • Authenticate that requests to your server are coming from your app and not a malicious user
  • Differentiate between requests from the various instances of your app installed on multiple sites

Later, we'll see how to do all that on the server. For now, let's focus on what we need to do on the frontend.

Instance ID

Each time an app is installed on a site a unique instance ID is assigned. You can use the instance ID to authenticate requests sent from an app and to know which instance of the app is sending the request.

Let's see how we add code to send requests to the server using the instance ID. In our app, we've placed this code in a file named utils.ts in the dashboard folder.

First, we create a function to get the app instance from the app's URL.

Copy
1
export function getAppInstance() {
2
  return new URLSearchParams(window.location.search).get('instance')!;
3
}

Next, we create a function to fetch data from the server using the app instance to authorize the request. Notice how we call the getAppInstance() function described above to create the authorization header.

Copy
1
export async function fetchWithWixInstance(
2
  relativePath: string,
3
  method: string,
4
  body?: any
5
) {
6
  const res = await fetch(
7
    `${import.meta.env.VITE_API_BASE_URL}/${relativePath}`,
8
    {
9
      method,
10
      headers: {
11
        Authorization: getAppInstance(),
12
        ...(body && { 'Content-Type': 'application/json' }),
13
      },
14
      body: body && JSON.stringify(body),
15
    }
16
  );
17


18
  const json = await res.json();
19
  return json;
20
}

Fetching Data

Now that we've set up the plumbing to make secure requests to the server, we can use the ProductChat component to send and receive chat messages.

First, in ProductChat.tsx we import the utility function described above.

Copy
1
import { fetchWithWixInstance } from '../../utils';

Then, we add a function to submit messages, send them to the server, and update the state with the response. Notice how this function calls fetchWithWixInstance() to post a new message to the server.

Copy
1
async function submitMessage() {
2
  const newMessage: Message = {
3
    author: 'User',
4
    text: messageDraft ?? '',
5
  };
6
  setChatMessages((state) => [...state, newMessage]);
7
  setMessageDraft('');
8
  setIsWaitingForBusinessBuddy(true);
9
  const { message } = await fetchWithWixInstance(`chat/product`, 'POST', {
10
    messages: [...chatMessages, newMessage],
11
    product: JSON.stringify(props.product, null, 2),
12
  });
13
  setChatMessages((state) => [
14
    ...state,
15
    {
16
      author: 'Business Buddy',
17
      text: message,
18
    },
19
  ]);
20
  setIsWaitingForBusinessBuddy(false);
21
}

Finally, we call submitMessage() when the send icon is clicked.

Copy
1
<Icons.Send onClick={submitMessage} />

And we call submitMessage() again when enter is pressed in the Input component.

Copy
1
onEnterPressed = { submitMessage };

Up next

Now that you understand how to communicate with your app's backend, we can now see how to deal with those communications on the server.

Was this helpful?
Yes
No