Full course available now! 👉 Shopify App Development Crash Course
In the last few years Shopify has been revamping their App CLI and all the tooli...
For further actions, you may consider blocking this person and/or reporting abuse
After complete the cmd
npm run dev, my theme editor don't show any app at contact page section, do you you know why?You also need to run
npm run deployto create a version/draft of the extensionHi @iskurbanov can we apply react to app embeded?
Yeah it’s actually the same way. You just have to create a block that will be an embed instead of app block. Just set the target to body instead of section, like this:
Thanks for your suggestion. it's working well. I have one more question that when we run
npm run deployit will delete all file in assets folder, I have a custom js folder in that so how can I ignore that file?@huykonofficial good question, you would have to adjust the "cleanup" script in the package.json
@iskurbanov can you give me an example to cleanup with ignore some specific files?
Sorry actually it’s not because of the cleanup script. What is your custom asset called? It shouldn’t be deleting it.
I see that the vite build will clean up all files inside assets folder, I have my custom js for my app block or embed, it used for setting schema. So my goal I want keep these files when vite build
It’s only set to remove .json and .gitkeep files so your .js file shouldn’t be removed by it. Are you importing your custom js file anywhere? The Shopify build command might be removing any unused js files.
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 Clio,
Hmm that’s strange. It should work the same way. There might be an issue with the build process in your case. Did you make any changed to the code?
Iskandar
Try displaying the value with liquid in the block component. Do you have that option (pickup availability) enabled in your admin dashboard?
I have the same issue. Once I deploy the app to heroku, I lose all tailwind styling. I've tried this on the template without altering any code or configs. The expected result is that the "Hello From React" is colored red. While running locally this is the case, but once published the text does not have the red style.
Does anyone have a solution for this?
Struggling with this too - Tailwind styles do not appear to be getting bundled with the output js file in the extension assets folder.
Were you able to find a fix?
Hey Kyle, this is the fix: github.com/iskurbanov/theme-app-ex...
Hey! Fix is here: github.com/iskurbanov/theme-app-ex...
Hey @iskurbanov ,
// Handle GET requestapp.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.
Yes I think only 1 will be displayed because we target the element by id in our react code. I haven’t had to display multiple so I’m not sure a work around this unfortunately.
I saw, thank you @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?
Maybe you need to run "shopify login" to connect your app to your partner account.
Hi, after complete cmd
npm run deploy, my app don't create release version, do you know why ?What does it say in your terminal window? Any errors?
No error in my terminal
Make sure you’re deploying to the correct app in your dashboard. This one has a different name. So maybe you created 2?
Just wondering why you didn't go with the Hydrogen and Oxygen stack?
Hey, totally different use cases. This is for an app, Hydrogen and Oxygen are for a headless store.
Thanks for the reply. Sorry for my confusion :) I'm looking forward to all your Shopify courses. I hope you can do a screencast/course on Hydrogen and Oxygen stack one day as there are hardly any courses on the subject out there.
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.
Thanks a lot!
Hey Jonas, you can easily do this by just passing them as data- attributes in the root div. Something like this:
Do you have course curriculum?
Hi, is there any way to transfer the newly created section to Shopify section?
Like this image?
Getting an error after
npm run dev, is there any fix ?Can i create multiple app blocks in same extenison using react? Also how can i pass data from liquid to react app if i have some block settings?
Hi,
I am just looking into shopify.dev/docs/apps/online-store.... Is it possible to integrate remix app as a theme extension?
Yeah probably, you would have to figure out a way to replace the vite build functionality.
The CSS no longer applies in the sample project extension side, did Shopify change something? @iskurbanov
Nevermind, I found the solution here
github.com/iskurbanov/theme-app-ex...