In extension folder , I have three folders which contain assets , blocks ,locales and snippets so what steps I need to follow to get work with react js in shopify theme app .
1 Like
As per the shopify , they will only let us to work in this folders assets, blocks, locales, snippets
so they dont provide any src directory ! Then too I have created the src folder and followed the steps which you had provided.
Error → Your theme app extension includes files in an unsupported directory, src
Make sure all theme app extension files are in the supported directories: assets, blocks, locales, snippets
For step 3 how does this apply if you have a custom app which is larger and frontend/backend. Surely you don’t have this whole app sitting inside the extensions/src folder?
No need to use webpack or anything custom. You can do it easily with just Vite plugins.
It took me a while to figure this out as well so I’ve put together a short guide and a template repo for this:
https://dev.to/iskurbanov/shopify-app-theme-extension-with-react-tailwind-css-3n9e
Template: https://github.com/iskurbanov/theme-app-extension-react
in addition to the above link, there is also this link
https://medium.com/@mittlus/how-to-build-a-shopify-theme-app-extension-with-react-tailwind-and-webpack-2c1799728989
There is also a duplicate thread containing extra information on further details, such as how one could organise having multiple blocks, and how to pass data to react.
https://community.shopify.com/c/online-store-and-theme/use-react-in-app-block-theme-extension/m-p/2393946/highlight/true/page/2
