How to use Image static assets in shopify app cli

[soniceran]

Hello,
I'm very new to Shopify app development, and on an app developing I'm trying to use static assets images from the public directory, but unfortunately This doesn't work as expected
I did try various strategies but most of them seems to break,  At the moment I only manage to serve images 
1. <img src="absolut-pass">

2. <img src="data&colon;image/png;base64, xxx">

Failure strategies

1. import Image from "next/image"

    a.<Image src="public/my-local.png">

    b.<Image src="absolut-pass">

    c. import  my-image from "../public/my-local.png"  <Image src="my-image">

2 <img src="public/my-local.png" />

I'm very interested to know if there is a beset practice or known strategy to use static assets in a Shopify app 

[mkamalkayani]

Hi, 

To get data from shopify into your app, you would have to use shopify apis. For example to get theme assets you can use the them asset endpoint as mentioned in detail here: https://shopify.dev/api/admin-rest/2021-10/resources/asset#top

[soniceran]

Hi Mkamalkayani,
Thnx for your reply but I’m afraid, this is not exactly what I meant.
In a use case of app development based on shopify app CLI https://shopify.dev/apps/tools/cli 
one can generate a boilerplate app based on NextJS-Node-Koa, then if one wants to use static images for example images for a slideshow that will be part of the app, then one need an option to call static assets that are not part of the shop theme but rather part of the app only.
I am trying to understand what is the best practice to call such assets as the normal strategies doesn't seem to work
I believe the issue is related to the OAuth as for some reason the shop value in the app call for images is undefined.
To reproduce the issue, you can try to build a sample app based on the app CLI and then try to use static image assets 

Would be great to understand why this requests getting rejected 
Thanks 

[mkamalkayani]

The verifyRequest middleware checks for an Authorization header in the incoming request, you would have to exclude your static assets from this middleware in order for it to work.

So, the '/images' or '/static' route should be before the verifyRequest middleware.

Hope this helps.

[Juan321654]

so local files are treated as routes? im having a hard time understanding this too. i know next.js treats the "pages" folder as routes, but why the images too? 

i tried adding this to the server.js file but still no luck

router.get("/images", handleRequest)

router.post("/images", verifyRequest({ returnHeader: true }));

[mkamalkayani]

@Juan321654  Yes.

This should work. 

router.get("(/_next/static/.*)", handleRequest); // Static content is clear

[Juan321654]

thank you but have you actually tried to recreate this issue by running the shopify-cli? that route is already generated by the cli and still does not fix the issue.
I found a workaround and it is to use a CDN to load the images from an URL but that's super inconvenient and annoying from Shopify, instead of just being able to use images from the local project.

[Edward_Wong2]

Hi, i have similar issue on the access pubic folder using Koa-Static.  And i have this code in server.js too.  May i know that how this code handle the public folder access? Thanks

[soniceran]

OK.. I see this issue get some attention, unfortunately the issue was quite painful,
and as far as I remember the solution was to replace few lines in the server.js
replace the commented code with the uncommented, this should give access to all the static files features of the next 

  // router.get("(.*)", async (ctx) => {
  //   const shop = ctx.query.shop;

  //   // This shop hasn't been seen yet, go through OAuth to create a session
  //   if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
  //     ctx.redirect(`/auth?shop=${shop}`);
  //   } else {
  //     await handleRequest(ctx);
  //   }
  // });

  router.all("(.*)", async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
  });

  server.use(async (ctx, next) => {
    ctx.res.statusCode = 200;
    await next();
  });

[Edward_Wong2]

Hi, thanks for your sample code. May i know that any affect on shopify embedded apps if comment the active shopify shop checking? these code seem like used to make sure the access have valid session.

[AndrewDarmat]

Thanks so much.

I've just added next line and it works for /public/images/

router.get("(/images/.*)", handleRequest);

 After that I tried the same for the entire /public/

router.get("(/.*)", handleRequest);

Works great

Small note: Be careful with names in your /pages/ and /public/ dirs. They don't have to be the same. In this case there will be conflict