Hi Shopify Community!
Something seems to be amiss with the tutorial Build a Shopify App with Node and React . It seems as though the instructions no longer follow what is possible in the dashboard. I have been spending the last few days, trying to figure out how to install the Sample Embed App that is produced from the tutorial into a store.
I can see that others have been asking this question as well without a response.
Unable to install my shopify app to a development store
Basically, all the fun seems to stop on step 3 Embed your app in Shopify, specifically when we reach the Authenticate and test your app section. It seems the ability to embed your app, or pair it with a store is not working and there is no way to get access to the value of shopOrigin. The valuer of the shopOrigin seems necessary to actually to make a connection through the concept of the Shopify App Bridge.
Does anyone know if this Build a Shopify App with Node and React tutorial is still valid?
How does one pair and app with a store, without using the missing dashboard view/controls ( I have outline those missing views below in the steps to reproduce what I am seeing) ?
If this is true, how can I embed my app so as to get the shopOrigin to appear in my server.js Context?
If embedding the app is not necessary how do I get the shopOrigin ?
Below are the steps I have been going down, and where things seem to fall apart if my questions above don't make sense.
My ngrok, Node/React/NextJs all seem to be running in my local and as I follow the instructions in step 1 and 2 of this section
"1. In the Shopify Partner Dashboard click the Select store button located inside the Test your app card"
'2. Click the development store where you would like to install your app. If you have not
yet created a development store, then click the Create new store button in the top right corner."
Next a pop appears warning user that this App will not be able be transferred
I click Install anyway because there seems to be no other course of action, if I want to pair my app with the store. After doing so I local app appears in the browser, which I believe is correct as it appears to show my current ngrok address and the single next page/index.js appears in the browser : ( looks good so far)
AND THEN..... HERE IS WHERE THE FUN STOPS
Screens 3, 4, and 5 seem in possible to reach, if the even exist.
Step 3 Dashboard View
Step 4 Dashboard View
STEP 5 DASHBOARD
Instead my store appears, with no semblance of the app I created with in the partner view of the dashboard.
I have tried using the "Manage private apps" link which allows me to create a private App. I have spent half the day going down the rabbit hole to no avail.
I have tried adding as a Custom App rather than a Public App, but this does not seem to work, either. Finally, I gave up and decided to just continue the turotial, having read in a one of the postings on that an embedded apps are only loaded in the dashboard as seen in step 5, for UI design, and would soon be deprecated. Maybe, I misread that or the information was faulty in the post.
So I continue on and made it through most of section 4 Build your user interface with Polaris , until I got to Add Shopify App Bridge, which seems to be impossible to complete, as I can not seem to get the shopOrigin to appear with in my server.js ( or other parts of the stack). I suspect that because I was never able to actually embed the app I do not have access to this value and will never get it until the app is somehow paired with the store.
Any Help would be much appreciated.
Solved! Go to the solution
I went through the app tutorial and built it out as per the instructions without any issues. I was able to embed the app and have it show up in the list of installed apps on my dev store. Have you tried cloning the completed code from https://github.com/shopify/shopify-demo-app-node-react/ to see if that works?
I think like all examples anywhere on the Internet it gives you a 'beginning' picture of developing an app, but the rest is up to your development expertise (i.e. it doesn't give you all the answers).
I did use it as a basis for an app very recently and it seemed straightforward and worked for me, although I did deviate from the example.
This is an accepted solution.
@GMKnight , @Kevin_A ,
I was eventually able to get through the tutorial, Build a Shopify App with Node and React and view it as an embedded app in the Shopify dashboard. When I initially posted this, it was accidentally flagged as inappropriate. I copied the contents before it was flagged and reposted it, where the topic was discussed and a solution provided. I am going to mark this reply as "successfully answered".
@Kevin_A , I will review the other tutorial that you posted. In the repost of this message, another contributor @policenauts1 provided a solution that triggered the displays needed to make the embed appear.
There were several other snafus that I pointed out in the posting that I was able to work through. I have moved on to other tutorials and mashing my way through some of the Partner Academy classes, and thus, have not gotten the chance to go back and really isolate what was happening for me as well as a number of others developers I found in the forums.
However, after loading the above link in the browser, not only did the views of the dashboard presented in the tutorial finally appear, but when I repeated the tutorial after several times after the initial success with above link, the views of the dashboard were always congruent with the tutorial. Perhaps, for you and the others that seemed to not face these issues, you had previously created stores or other embed apps and some how had established some needed presence of assets and authorizations. I started the tutorial before having an account or even establishing and identity, and therefor had not previously created a store. I only signed up and became a Shopify Partner as the directions in the tutorial stipulated that I would need specific assets. Anyways, perhaps this information will help the QA team
@GMKnight, no doubt, I always approach tutorials as a starting point, not the end all be all solution. Never the less thanks for the advice. I will keep it mind as I proceed.