Hello, I’ve just started getting into shopify development and completed Build App Example tutorial. It was a great tutorial, but really only covered the merchant back office flow. The app I’d like to build interacts with the online store. I’ve read through the docs and started using app blocks. My …

Just in case you haven’t solved this yet. Is is possible to use React within an extension. You can use tools like webpack and babel to bundle up your react app into a single file (i.e. bundle.js). Then in your block, just include that one file. Your app-block.liquid file may look something like th…

Good day Bro. I tried to follow your instructions and I created separate folder for the ReactJS files. but I doesn’t connect with the liquid file to React JS folder, even if I am calling the Dom Id of element and imported the bundled JS file in the app block section. here’s the code bro. kindly enl…

Watching you very closely as I am trying to do the same thing. Did you get any solution?

Did you build/bundle the React app?

To clarify, I have a separate source folder outside of my extension folder. This is where my React source code lives. Then I configure webpack to build into the “js” folder of my extension. And I reference this file in the app-block.liquid file (see above).

Hey! Hopefully I can help you out. I am just using the shopify-cli to configure the extension. The CLI will generate all the necessary folder structure and files for an app extension (theme app extension). I basically followed this tutorial to get up and running. Once you have that going, you sho…

Hi @ozzyonfire , I followed the references you provided to create a Shopify app and theme extension and started a vite react typescript project in a new folder inside the extensions folder. I configured the vite.config.ts file to be like this: import { defineConfig } from 'vite' import react from…

I followed all the steps but it’s not working in my case? Can you please help me out [codernex_0-1690129100158.png] [codernex_1-1690129125017.png]

It looks like you are using Vite to compile and bundle your react project. I don’t have a ton of experience with Vite, but I will try to help… React needs a div element to hook into so that it can inject the react app into the DOM. I’m assuming your vite project has some sort of index.html file? Th…

I didn’t load my assets in via a element (although, I think somewhere in the docs it does say this may be possible?). Instead, I just referenced the bundle.js from the schema off the app-block itself. I think the structure is “javascript”: “bundle.js” and you just make sure “bundle.js” is in your …

Use React in app block theme extension

Retired Boards Appdev Store Design

oyong17 July 11, 2023, 12:46am 11

wow. Thank you very much. now it enlightens me.

Topic		Replies	Views
Theme App Extensionsの実装方法として、Reactを用いることができるか Shopify アプリ	6	97	March 18, 2022
How to use React js in theme app extension? Shopify Discussion troubleshooting	5	553	June 20, 2024
App block extension Store Design	0	24	October 11, 2021
How to use React js in Theme app extension? Shopify Discussion troubleshooting	1	95	August 3, 2023
Embed react app into shopify theme Store Design	16	1126	December 25, 2020

Use React in app block theme extension

Related topics