Fetching public assets in shopify remix

Fetching public assets in shopify remix

weebySagar
Shopify Partner
19 1 3

Hello everyone Iam trying to fetch svg icons which are in the public  folder in remix app , I can access it via going through the url like this https://<url>/icons/icon.svg but I dont want to use it like this because I want to mask the image to give it color and it doesnt render the image trying from past 3days, without masking its visible dont know why , So I am trying alternate approach first to fetch the image and modify the response svg code like its color to give specific color and its also working but in development after deploying Iam getting cors error because of different domain origin can anyone tell me how can I fix it .

I have modified the entry.server file by including the cors from 'remix-utils' but its not working like this

 

export default async function handleRequest(
  request,
  responseStatusCode,
  responseHeaders,
  remixContext,
) {
  addDocumentResponseHeaders(request, responseHeaders);
  const userAgent = request.headers.get("user-agent");
  const callbackName = isbot(userAgent ?? "") ? "onAllReady" : "onShellReady";

  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        [callbackName]: () => {
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

          responseHeaders.set("Content-Type", "text/html");
         cors(
            request,
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            }),
            {
              origin: true,
              methods: ["GET"],
            },
          ).then((response) => {
            resolve(response);
          });
          pipe(body);
        },
        onShellError(error) {
          reject(error);
        },
        onError(error) {
          responseStatusCode = 500;
          console.error(error);
        },
      },
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

 

Reply 1 (1)

JoeMetmos
Shopify Partner
30 0 0

Hi @weebySagar 

 

Sounds like you are trying to access SVG icons from the public folder and modify the SVGs.

 

Some possible solutions:

 

1) Instead of fetching SVGs over the network, import them directly into your React components and modify their colors. For example, use a SVG loader like https://github.com/pd4d10/vite-plugin-svgr

So it won't have network requests for SVGs, so no CORS issues.

 

2) Include the SVG content as inline markup and modify its attributes.

 

3) Have you verified `Access-Control-Allow-Origin` header in your browser with the `remix-utils` cors code added?

I think it isn't setting the header. A possible cause is this piece of code isn't triggered (you can add some debug log to confirm if this is triggered at all), note 

entry.server `handleRequest` is not called for `non-HTML responses`, which is likely to be the cause if it's not triggered.
 
Hope this helps.

 

 

 

CTO | eCommerce & SaaS Expert
20 years in tech, 10+ years driving eCommerce success
Proven track record across Shopify, Magento, BigCommerce, WooCommerce, Salesforce
Website: Metmos