Shopify App - Theme Extension with React + Tailwind CSS

After complete the cmd npm run dev, my theme editor don't show any app at contact page section, do you you know why?

Hey I was interested in this course so I spun this up last night. I used the complete version from GitHub to get an idea of what the final product would look like. While the styling looks good on the preview, it does not get applied in the editor at all for some reason, which would create a confusing experience for users of the extension. Is this just a thing isolated to working on a dev branch with HMR or would it appear to a user this way once the theme app extension is published as well?

Preview in editor:

As it appears on website (127.0.0.1:9292/):

Hey @iskurbanov ,

// Handle GET request
app.get("/apps/proxy", async (_req, res) => {
console.log("GET API");
try {
console.log("trying...");
res.status(200).send({ message: "Got it" });
} catch (error) {
res.status(500).send(error.message);
}
});

When i hit the URL without shopify.validateAuthenticatedSession() it work fine, but when I call on my component

const textProxy = (d) => {
return new Promise((resolve, reject) => {
fetch("SHOP-URL/apps/proxy", {
method: 'POST',
redirect: 'manual',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify(d)
})
.then(response => {
console.log(response, 'response');
return response; // Assuming the response is in JSON format
})
.then(data => {
resolve(data);
})
.catch(error => {
reject(error);
console.log("test", error);
});
});
};

its show me 404 error, I am stuck please!

hi @iskurbanov, in the page, i added multiple this app that you guide in this article. But why don't it working to add multiple apps into sections or blocks? For example, in homepage, i want to add 2 this app into 2 sections. You can see this picture to understant about my problem. (As you see, i added 3 apps, but only one app was displeyed. Why?). Thanks @iskurbanov.

After completed the cmd npm run dev, my terminal don't show me link to install app in step 6.
In addition, i have this error

can you help me?

Hi, after complete cmd npm run deploy, my app don't create release version, do you know why ?

Just wondering why you didn't go with the Hydrogen and Oxygen stack?

Hi @iskurbanov Great article! Naming the app was the only lag in this. Much appreciated! (updated message and also LinkedIn to you - willing to hire @iskurbanov ) The app can be added as a section to any page, not just the contact page.

Hi @iskurbanov, thanks for the detailed guide. I'm running into this error after running npm run dev. Have you encountered this before? My ruby version is ruby 3.3.3. if that's useful.

Hi @iskurbanov
how would you integrate settings from the editor into the react code? For example i want to implement an image picker setting.

1. Where would i put this setting?
2. How would i get this image into the react code?

Thanks a lot!