Solved

How to use React js in theme app extension ?

sachiyablavant
Shopify Partner
29 0 3

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 . 

Accepted Solution (1)

iskurbanov1
Shopify Partner
6 1 3

This is an accepted solution.

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

View solution in original post

Replies 4 (4)
sachiyablavant
Shopify Partner
29 0 3

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, snippetsScreenshot 2023-07-10 181640.pngScreenshot 2023-07-10 182212.png

jlogey94
Shopify Partner
9 0 1

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?

iskurbanov1
Shopify Partner
6 1 3

This is an accepted solution.

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

Alejandro007
Shopify Partner
2 0 0

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-webpa...

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/23...