Theme App Extension

[zohaibarsalan]

Hello, once again Kinngh.

I questioned you previously about adding theme-app-extensions to my application and I did do that. I put the generate extension script in my package.json and made an extension through the Shopify CLI. The CLI generated the extensions folder in which I have the normal files and folder. I even see the extension for my app in the extensions tab in the Partners dashboard. However, I do not know how to view or run the extension. I don't see the extension in the online store customizer.

package.json

"scripts": {
    "dev": "concurrently \"npm run dev:*\"",
    "dev:server": "NODE_ENV=dev nodemon server/index.js --ignore client/ --ignore dist/",
    "dev:client": "vite --config=./client/vite.config.cjs",
    "build": "vite build --config=./client/vite.config.cjs",
    "start": "NODE_ENV=prod node server/index.js",
    "-----> utils <-----": "",
    "update": "ncu -u",
    "update:url": "node _developer/updateDashboard.js",
    "pretty": "prettier --write .",
    "-----> tunneling <-----": "",
    "-----> ngrok <-----": "",
    "ngrok:auth": "ngrok authtoken <your-auth-token>",
    "ngrok": "ngrok http 5173",
    "ngrok:prod": "ngrok http 8081",
    "-----> cloudflare <-----": "",
    "cloudflare": "cloudflared tunnel --url localhost:5173",
    "cloudflare:prod": "cloudflared tunnel --url localhost:8081",
    "-----> Shopify <-----": "",
    "g:install": "npm i -g @shopify/app@latest @shopify/cli@latest",
    "shopify": "shopify",
    "info": "shopify app info",
    "generate": "shopify app generate extension",
    "deploy": "shopify app deploy",
    "-----> Reserved Scripts <-----": "",
    "preserve": "npm run build"
  },

shopify.extension.toml

name = "bannerito"
type = "theme"

Partners Dashboard

I would greatly appreciate it if you helped me figure out how to run the extension in conjunction with my normal application.

Cheers, Zohaib :)

[kinngh]

You run your extension separately from your main app. Here's an example of how to structure your app and have things work: https://github.com/kinngh/shopify-app-js

Also, this should've been a discussion, not an issue. Please be mindful from the next time and post in the right space.

[zohaibarsalan]

I'm sorry I didn't put this in the correct space.

I have one last question, I add this to my main package.json

 "extension": "shopify app dev",

And then run this in the main folder with conjunction to the actual application?

Doing this the app embed block doesn't appear in the online store customization.

[kinngh]

1. Make sure that your extension folder isn't inside the app folder and follows the setup that I posted in the repo above
2. In your app folder, run npm run dev
3. In your extension folder, run shopify app dev

[zohaibarsalan]

Is this the correct structure of the extension folder?

[zohaibarsalan]

Actually, nevermind it works. Thank you, Kinng for all the help. Once again I am sorry for not uploading this in the correct space. And thank you for taking out time to help me.

[kinngh]

Nah don't worry about it! Also again, this is exactly what I've been saying - your app and extensions folder need to be at the same level, and the extension folder shouldn't be inside the app folder (the app folder should include server/, utils/, _developer/, client/, etc)

[zohaibarsalan]

Yep I got it thanks to you.

Do you have any idea how I can take data from my app and pass it to embedded theme blocks? Like the user in my app inputs his slogan and that slogan is then taken to a block and I can use that data as the slogan

[kinngh]

Make an app proxy and use a fetch() to get data from your app

[zohaibarsalan]

The proxy isn't working. I am using the already-written proxy controller.

Partners Dashboard:

app_proxy/index.js

import { Router } from 'express';
import clientProvider from '../../../utils/clientProvider.js';
const proxyRouter = Router();

proxyRouter.get('/json', async (req, res) => {
  const { client } = await clientProvider.offline.graphqlClient({
    shop: res.locals.user_shop,
  });
  return res.status(200).send({ content: 'Proxy Be Working' });
});
export default proxyRouter;

test.liquid

<script>
  fetch("/apps/test-app/json")
     .then((res) => console.log("Data from proxy ", res))
     .catch((error) => console.log("Error from proxy", error))
</script>

Response in console:

[zohaibarsalan]

Ok Kinngh I got it. It was because of ngrok. I put this

https://my-store.myshopify.com/apps/test-app/json

in the browser and used requestly to make sure the ngrok request header browsing warning was set to true and then I got the json with the response that the proxy works.

In the end it was because of ngrok.

I think I am going to switch to cloudflare, do you have any tips or tutorial on how to switch?

[kinngh]

Just swap out ngrok with cloudflared in package.json after installing the right packages for your system and you'll be good to go!