How to display and Inject the data at front end side in Remix ?

How to display and Inject the data at front end side in Remix ?

RaviGohil2211
Shopify Partner
8 0 0

Hey Guys,

I am new here in Shopify app development, So currently I am creating an app to learn with the Remix Shopify app template.

So, I am storing the "Text " and "Product ID" to db prisma, so I want to display the text to that particular product at front end.

where stored in data forex.

If the product ID is 1 and the text to display is "Hello World", need to display "Hello World" to that product.

So how can I display that data to the front end which is stored in DB with the Remix app from the admin side?

Or

Inject to the front end?

Replies 17 (17)

onetimeengineer
Shopify Partner
5 0 2

You're probably best joining the Shopify Devs discord to help you with app engineering questions.

https://discord.com/invite/shopifydevs

RaviGohil2211
Shopify Partner
8 0 0

I had already asked question on discord as well but not getting any reply anywhere.

loPat
Shopify Partner
2 0 0

Did you ever figure this out? I'm a bit lost in the connection between Remix, Hydrogen and Liquid. 

 

My guess is that the Remix created app has the ability to obtain permissions to access and store data to the Shopify store. But I'd have to create a separate page using the frontend editors to actually access the data and let users actually do anything with data from a Remix app. 

 

I'm actually building a tracking app. I think my plan is to obtain the API keys to our tracking service. Then either by action like on an order or periodically, I'll have it reach out to collect and store tracking info. But trying to find someone who can let me know if there is a better way of doing things. 

onetimeengineer
Shopify Partner
5 0 2

@RaviGohil2211 @loPat I had to implement functionality for my app to perform some logic / retrieve some data from my Remix app for the Shopify storefront product page. I did it using a Theme app extension. https://shopify.dev/docs/apps/online-store/theme-app-extensions 

 

I then had an API endpoint in my Remix app, and used the Shopify app proxy (https://shopify.dev/docs/apps/online-store/app-proxies) to make a request to that endpoint passing a few parameters including the product ID.

 

That would be my recommended approach.

 

So in the case of the OP, you can

 

- create an API endpoint in your Remix app to return "Hello World" if the product ID is 1

- Create a theme app extension for your app

- Within your theme app extension in a javascript file, use the fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch to make a request to your API endpoint using the Shopify app proxy so you don't directly expose your API endpoint

 

If you need specific code examples, let me know and I can share some.

 

 

Charles_Roberts
Shopify Partner
47 0 13

@onetimeengineer This is great information. Stuff like this is as rare as rocking horse manure. 
Could you please post some code examples, to help us understand this strategy.
It would really help us, progress with this issue. 🙂

Charles_Roberts
Shopify Partner
47 0 13

I just had a bit more of a look at:

 

https://shopify.dev/docs/apps/online-store/app-proxies

 

I don’t understand what the point of the proxy is?
Why can’t we just use the normal URL of the online store section, to make an Ajax request, to?
Let’s say, I want to send some content to:

 

https://shopify.com/84935835937/account/orders

 

This is the accounts section of my online store at https://sandbanks-test.myshopify.com

 

How would I send some HTML, using a proxy, so that it displays inside:

 

https://shopify.com/84935835937/account/orders

Charles_Roberts
Shopify Partner
47 0 13

@onetimeengineer

 

So, this is how I plan to create my theme extension app:

 

1. open my existing remix admin app [sb-user-admin-app-v1] in VSCode

2. open VSCode terminal

3. type in:

 

cd app
npm run shopify app generate extension

 

Now this is where I don't understand what to do?

 

Do I add this extension to the existing app [the app that this extension will be located within ie sb-user-admin-app-v1]

Or do I create a new app?

 

My intuition was telling me to choose the existing app, othewise why would I be creating the extension directory, inside the existing app?

But, I can't be 100% sure.

This is a very important decision, so I don't want to  get it wrong.

 

Please could you let me know whether I should use the existing app or create a new app?

Charles_Roberts
Shopify Partner
47 0 13

OK. I am going to answer my own question, above.

 

1. open my existing remix admin app [sb-user-admin-app-v1] in VSCode

2. open VSCode terminal

 

DO NOT ADD:

 

cd app

At the start.

The extensions folder needs to be installed in the root of the project's root, not the app's root.

 

3. type in:

 

npm run shopify app generate extensio

 

4. Choose a template. I chose Online Page template.

5. Now, the CLI will install the following in the project's root directory:

 

└── extensions
    └── my-theme-app-extension
        ├── assets
        ├── blocks
        ├── snippets
        ├── locales
        ├── package.json
        └── shopify.extension.toml

 

6. The add a package.json to:

 

extensions/my-theme-app-extension

 

I just added the following to package.json:

 

{
  "name": "sb-user-extension-app-v1",
  "version": "1.0.0"
}

 

This is the minimum requirement for a package.json file

 

7. Then, navigate to the extensions/[name of extension app] and:

 

npm run deploy

 

The extension will get deployed to the existing app, in the app folder.

 

8. Then install Ruby [yes you heard correctly: INSTALL RUBY], otherwise:

 

npm run dev

 

Will not work again. Ruby is required, if an extensions folder is present in the project's root.

 

https://rubyinstaller.org/downloads/

Charles_Roberts
Shopify Partner
47 0 13

bookmark

Charles_Roberts
Shopify Partner
47 0 13

Hi @onetimeengineer 

 

> Within your theme app extension in a javascript file, use the fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch to make a request to your API endpoint using the Shopify app proxy so you don't directly expose your API endpoint

 

I have now got to this stage in your instructions 🙂

 

Could you explain:

 

  • why I need an App Proxy
  • how do I send data from my theme extension app to my remix admin app, so that it doesn’t hit the login page. In other words, what auth params, like client id/secret, do I need to send with the data?
  • Could you supply a code snippet of your fetch request?
onetimeengineer
Shopify Partner
5 0 2

Hi @Charles_Roberts ,

 

Sorry for the late reply. I don't use the community forum much, as I found that help is more readily available by raising Github issues against the relevant Shopify repos.

 

 

Did you manage to get it to work? Nonetheless, here are answers to your questions:

 

- why I need an App Proxy

 

A number of good reasons, for example, a) it keeps your API endpoint concealed from an exposure/security perspective as Shopify will throttle requests to the proxy b) Shopify will provide the requisite authentication headers/params to your API endpoint, so you can authenticate the proxy request using the Shopify Remix helper method. See code snippets below.

 

- how do I send data from my theme extension app to my remix admin app, so that it doesn’t hit the login page. In other words, what auth params, like client id/secret, do I need to send with the data?

 

See code snippets below.

 

- Could you supply a code snippet of your fetch request?

Sure.

 

Fetch Request - Theme App Extension

 

// timeout the request/response after 5s not to impact performance
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
        
const response = await fetch("/apps/<subpath>/<endpoint>", {
   method: "POST",
   headers: {
     'Content-Type': "application/json",
     "ngrok-skip-browser-warning": true
   },
   redirect: "follow",
   body: JSON.stringify({
     locale: Shopify.locale,
     product_id: product_id,
     // other request parameters for your endpoint
   }),
   signal: controller.signal
});

const responseData = response.json();

where

  • <subpath> is the Subpath you configured in the Shopify admin for your app proxy
  • <endpoint> is your Remix nested-route URL, e.g. process-request if you have something like `api.process-request.jsx` (Your proxy URL in this case would be something like https://your_app_url/api

 

Remix App - Authenticate Proxy Request

 

Assuming you're sending a post request, in your Remix route file

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const { session } = await authenticate.public.appProxy(request);
  
  // handle your request
};

 

I use Typescript in my app, so `ActionFunctionArgs` is just type-hinting the action method arguments. If you're sending a GET request, you would implement a `loader` function but use the same logic for authenticating the proxy request.

 

I hope this helps.

Charles_Roberts
Shopify Partner
47 0 13

Brilliant stuff. Thanks for the reply.

Well, I managed to resolve everything, but it is good to compare my methodology, with yours.
The local version with NGROK, worked perfectly with my app proxy.

But I had a problem with an invalid signature on my fly.io production version:

 

https://github.com/Shopify/shopify-app-js/issues/455#issuecomment-2026216972


In the end I had to rewrite my signature, with the use of the Shopify Remix createSHA256HMAC() method at:

 

https://github.com/Shopify/shopify-api-js/blob/4b31178356ad910aa18bebd7926cb1f0e51887d0/packages/sho...

 

Now, both my development & production versions work. 🙂

 

onetimeengineer
Shopify Partner
5 0 2

Great to hear it worked out in the end.

 

I didn't have any major issues in production as I self-host and can control all aspects of the environment.

danny_boris
Shopify Partner
5 0 1

Hey I also got stuck with that.
what exactly should my proxy server do with the incoming request?
I configured a app proxy in app configuration on shopify, set up a remix route and sent a post request from theme ext. to the endpoint.
So it looks like that
```

fetch('/apps/proxy_endpoint/api/process', { method: 'POST', headers: {
redirect: "follow",
} })

```

Where the remix file is named api.process.jsx, proxy app is runnning on ngrok and getting the requests, but it is not forwarding anything the the remix file.
Do you happen to know whys that?

danielbezerra
Shopify Partner
4 1 0

your redirect urls might be wrong. Go into Partner admin page -> choose your app -> Configuration , then there check the redirect Urls and Proxy Url, and see if everything matches. In latest shopify CLI it should ask you the first time you run shopify app dev with the proxy, if you want to automatically update the Urls, you must accept this

danny_boris
Shopify Partner
5 0 1

Got it! Url was not of shopify dev app. Also, if someone will find it useful:
[app_proxy]
url = "shopify_dev_app_url"
subpath = "<user_choice>"
prefix = "<user_choice>"

 

This will keep the url up to date everytime you run the dev server.

 

Sunil-Kumar
Excursionist
16 1 1

You need to create api in remix and then create theme app extension and call the api with product id from app block then you show them on product page on store front.

SK