Alokai•6mo ago

Deploy Vuestorefront with Docker

Hi community, I am trying to understand the deployment part. So I have a vuestorefron application running React/Next.js I have a vuestorefront integration with (custom) When I connected React/Next.js with integration - locally, the integration server is running on the http://localhost:8181/ when in React/Next.js app I call sdk.customIntegration.generateCustomerToken(payload) - I can see in Chrome Devtools that it does POST request to an endpoint http://localhost:8181/customIntegration/generateCustomerToken So now I am ready to deploy this application LIVE, when I deploy React/Next.js application - it can be accessed on some specific domain let's say mysite.com when I deploy a middleware application - I should also expose it to the world on a specific domain let's say api.mysite.com I can't understand what should I configure in the React/Next.js application during build time, so that when the application calls SDK sdk.customIntegration.generateCustomerToken(payload) - it does POST request to http://api.mysite.com/customIntegration/generateCustomerToken Could you please help me with that ? Or maybe I am doing something wrong ? Thank you!

Solution:

hey, when you init SDK you are providing it middleware URL, right? example: const { ct } = initSDK({ ...

Jump to solution

4 Replies

Solution

skirianov•6mo ago

hey, when you init SDK you are providing it middleware URL, right? example: const { ct } = initSDK({ ct: buildModule(ctModule, { apiUrl: 'http://localhost:8181/ct' }) }); cons you can add a conditional statement here, that if it's in prod use the hostname of your service, then SDK will be sending requests to that hostname

valerii.f•6mo ago

omg.. that is so true.. Thank you @skirianov !

valerii.f•6mo ago

One more thing, maybe you can answer or point to documentation: All endpoints we create in integration using POST method. Is there a way to change it to GET ?

export async function exampleMethod(props: TODO) {
  const { data } = await client.post<TODO>('exampleEndpoint', props);
  return data
}

export async function exampleMethod(props: TODO) {
  const { data } = await client.post<TODO>('exampleEndpoint', props);
  return data
}

I need an endpoint to be await client.get , but when I change it, the app crashes with error SDKError: Request failed with status code 404

skirianov•6mo ago

https://docs.vuestorefront.io/middleware/guides/caching - you can read about it here. Tho, I'm not sure what middleware version are you using.

Vue Storefront Docs

Caching

Caching is another powerful technique that can boost the performance and reliability of your VSF middleware application. In the following guide, we will cover the caching of responses from GET endpoints that can be cached.

Gaming

Programming

Deploy Vuestorefront with Docker