Hi all,
i’m hoping someone can advise me, I’ve been going round in circles with this problem. Feels like it should be straight forward but I can’t get it to work…
I have an AWS lambda that returns a health status end point:
https://mg33cv2cbucg35psjackwv5ucu0muisw.lambda-url.eu-west-1.on.aws/health
I have tried both with the app proxy approach and with the CORS approach to access this API from within my POS UI Extension:
My latest cut down POS extension test is a simple boilerplate extension that has a tile, clicking the tile opens a modal:
Opening the modal tries to access the health endpoint, which errors:
The app toml has the proxy set up and the write proxy permission:
[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "write_app_proxy"
[app_proxy]
url = "https://mg33cv2cbucg35psjackwv5ucu0muisw.lambda-url.eu-west-1.on.aws"
subpath = "proxy"
prefix = "apps"
I have uninstalled and reinstalled the app and I can see the proxy is there:
No matter what I try, I get a load error when trying to access the API through the proxy in the POS UI extension, however accessing the page directly works:
Here is the Modal component:
import React, { useEffect, useState } from 'react';
import { Text, Screen, ScrollView, Navigator, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi();
const [data, setData] = useState<any>(null);
useEffect(() => {
const fetchData = async () => {
try {
const baseUrl = 'https://teststore1-20240105.myshopify.com';
const healthUrl = `${baseUrl}/apps/proxy/health`;
const response = await fetch(healthUrl);
const healthData = await response.json();
setData({
success: true,
data: {
message: healthData.message,
status: healthData.status,
timestamp: new Date().toISOString(),
note: "Lambda connection successful!"
}
});
} catch (error) {
// Fail silently, just don't set data
}
};
fetchData();
}, [api]);
return (
<Navigator>
<Screen name="HelloWorld" title="App Proxy Demo">
<ScrollView>
<Text>Hello World</Text>
{data && (
<>
<Text>Status: {data.success ? 'Success' : 'Failed'}</Text>
<Text>Message: {data.data?.message}</Text>
<Text>Status: {data.data?.status}</Text>
<Text>Timestamp: {data.data?.timestamp}</Text>
<Text>Note: {data.data?.note}</Text>
</>
)}
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.home.modal.render', () => <Modal />);
(Screenshot above still had some debug logic, i’ve simplified the code for this snippet, this version just shows the “Hello World” fallback content)
Can someone please give me some pointers on where I’m going wrong?
Many thanks in advance! This is driving me crazy
