Is the shopify tutorial... Build a Shopify App with Node and React .. actual working?

Solved
Highlighted
Shopify Partner
9 2 2

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.

(6/17)
Unable to install my shopify app to a development store 

(6/18)
Not getting the "Install Unlisted App" popup for some reason. 

(6/21)
Stuck in: Build a Shopify App with Node and React

(6/24)
Trouble installing custom embedded app to 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. 

Questions:

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"

storecreated.png
  

 '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

Screen Shot 2020-06-26 at 4.15.02 PM.png


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)


app-install-resulty.png

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
Step3.png

Step 4 Dashboard View

Step4.png


STEP 5 DASHBOARD 
Step5.png




Instead my store appears, with no semblance of the app I created with in the partner view of the dashboard.


funstopshere.png


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.

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
44 2 7

Hey @Streeter 

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?

Kevin_A | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Partner
70 7 23

@Streeter ,

 

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. 

 

GMKnight.

Store owner and app developer. Canada.
0 Likes
Highlighted
Shopify Partner
9 2 2

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. 

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={access_mode}

 

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

Thanks

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

1 Like