Trouble with extensions

[ShobhanSrivastava]

Recently I migrated my app to this template with the latest version that comes with managed installation. My app already had 2 extensions, script extension and a pixel extension. Since this app doesn't explicitly tells you how to create extensions, I copied the extension directory from your express-mongodb template, and created the two extensions. Now when I am doing npm run update:config, the configuration for the app does change but the app is using the older extensions. I am really struggling with extensions, any help or a video tutorial would be really helpful.

[kinngh]

While a video + text update on this is coming on Monday, here's how to get this done:

1. Separate out your app/ and extension/ folders. (Rename your current folder to app/ and create a new folder called extension
2. Update the npm run update:config script in app/package.json to node _developer/tomlWriter.js; cd ..;shopify app deploy
3. In your root, run npm init --y to ensure you have a package.json file in your root.
4. Get in your app/ folder and run npm run update:config and it should write a shopify.app.toml file to your extension/ folder. We're not deploying anything yet, but this ensures your setup is correct.
5. Place your extensions/ in extension/
6. Go to your app/ and run npm run update:config to push with your extension.

For reference, here's what the folder structure should look like:

app/
extension/
package.json

and this is a more detailed version:

app/
app/package.json //<--- npm run update:config lives here

extension/
extension/extensions/ // <---- all extensions live inside of this folder
extension/package.json

package.json //<--- this needs to exist or CLI would throw an error

[kinngh]

Simplified:

Detailed:

[ShobhanSrivastava]

Did exactly what you mentioned. My folder structure looks like:

Running npm run update:config seems to have written 3 shopify.app.toml files. One each in the root/, app/ and extension/. [Didn't release a new version at this point]

Now added extensions/ folder inside the extension/

From app/ ran npm run update:config but it is not able to identify any extensions

[ShobhanSrivastava]

Ya it is

[AminRafaey]

Hi @kinngh, thank you for sharing details it worked locally but if we deploy over Vercel. Vercel does need next.js version inside root package.json file and there will not any So should we change the root directory inside Vercel to app/?

[kinngh]

@AminRafaey correct - you'll have to update your Vercel config by pointing it to the app/ now instead of the root^

[AminRafaey]

@kinngh Changing the root directory over Vercel worked like a charm, but still, I can't see extension on my live shopify store. What specifically do we need to do to make it work over live with vercel?

Here is my vercel.json looks like:
{ "builds": [ { "src": "app/package.json", "use": "@vercel/next", "config": { "distDir": "app/.next" } } ], "routes": [ { "src": "/(.*)", "dest": "app/$1" } ] }

[kinngh]

You do not deploy to Vercel for extensions. Just run "bun run update:config" with credentials from your live app and it pushes from your local to prod since extensions are hosted by Shopify, not by the developer.

[ShobhanSrivastava]

Hey @kinngh, is there a way to inspect the code inside the extensions after it goes to Shopify's CDN?

[ShobhanSrivastava]

Yes in a fresh app the changes are going through. Is there a way to make sure that the changes always go through?

[kinngh]

I don't see problems on my end on any of our apps - try getting through partner support? One thing you can do is when you're making requests or are in specific stores, console.log() a version string so you know what version is being used, or you can always add something to window in your theme extension so you can run window?.app_name?.version and get a version string off it and confirm if it's cache or it's not going through

[ShobhanSrivastava]

So in order to solve that caching issue, I added a package.json with the following data in each of my extensions directory.

{ "name": "pixel-extension", "version": "1.0.0" }

Now on every change I am making sure to update the version inside my package.json. After this, running npm run deploy does change the extensions.

Can you please review and let me know if its the right approach?

Now one more issue, the extension isn't updated for the users that had my app previously installed. The extension changes seem to show up only for the users installing my app thereafter.

[kinngh]

• Tbh if it works, it works ™
• Are you sure there's a new release or have you modified something? This is extremely odd. Can you DM me on X? I want to see this

[ShobhanSrivastava]

So I tried the same with my test app, but it did not work this time.