Build a Shopify App with Node.js and React - pageg/annotated-layout.js doesn't appear

Solved
dorka_horvath
New Member
3 0 0

Hi!

 

I'm going through the "Build a Shopify App with Node.js and React" tutorial and I'm lost at the point when I added annotated-layout.js to the pages folder and it's content supposed to be shown on the Developer's store/Apps/Sample App page. I see it's content is correct, cause if insert it into the index.js file (insted of it's original content) it appears. I've tried to put  and export both from index.js, but I stucked with it. I opened the project in WebStrom and searched for both js files, index.js appears is many result but annotated-layout.js nowhere. I've tried adding a pages2/index.js but this also didn't work.

Which one is the right way from the options below:

  • Referencing annotated-layout.js somewhere? (like in package.json there is "main": "index.js")
  • Put all of the content into index.js and export them, than how?
  • Any other solution?

Many thanks in advance!

 

0 Likes
katiedavis
Shopify Staff (Retired)
Shopify Staff (Retired)
39 7 12

This is an accepted solution.

Hey @dorka_horvath ,

 

I just want to confirm a couple of things! Bear with me!

Did you follow these steps?

1. create a file called annotated-layout.js, which is within the pages folder just like index.js

2. did you export the content correctly? The last line of the file should be "export default AnnotatedLayout;"

3. Did you set up your app navigation? https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-int...

 

You can also try to view the page by appending annotated-layout to your url in the dash. 

 

Let me know if you followed all these steps, and then we can trouble shoot from there.

dorka_horvath
New Member
3 0 0

Many thanks @katiedavis ! The app navigation was missing, setting up solved my problem. 

0 Likes
hemantgoyal
New Member
3 0 0

Can you please explain how to add app navigation ? I tried appending the annotated-layout to the url and it does not work. 

0 Likes
hemantgoyal
New Member
3 0 0

I used the link posted by you, but when I go to my extensions I do not see a shopify admin nor do I see Embedded app option!

0 Likes
kevinjtsai
New Member
2 0 2

@hemantgoyal The section has moved to App Setup > Embed your app in Shopify admin > configure > Add navigation link

hemantgoyal
New Member
3 0 0

Yes, figured. But creating an app navigation link did not really helped my case. On searching further it seems it is a chrome browser issue, while I found solutions for ruby on rails mentioned, I could not find a workaround for the node.js and react tutorial. If you had any success on that front please help me. 

0 Likes
kevinjtsai
New Member
2 0 2

@hemantgoyal The Node/React stack is working fine for me. Do you see the embedded app's Empty State view at all or do you just not see the navigation links?

0 Likes
theothersteve
New Member
2 0 5

Using a Mac (Catalina Version 10.15.7) localhost server and Chrome browser (Version 90.0.4430.85) and having the same issue as @hemantgoyal . I can see the empty state screen, but appending "/annotated-layout" to the URL (or clicking the "Annotated Layout" link) shows me a brief "Enable Cookies" screen, then crashes:

   ChromeEnableCookies.png

I forged ahead to add other code and install the app bridge, hoping that might solve any Chrome/cookie issues, but I still can't get it to work. Any advice from @kevinjtsai or @katiedavis (or anyone who can help) would be greatly appreciated! Thanks!

Bosiyaw
Tourist
3 0 1

Hello Guys,

I have the exact same Problem as theothersteve. When i try to append the "annotated-layout" to my URL it quickly shows the enable cookie error and then crashes. Also the same thing is happening when i did everything with set up navigation. I am also using chrome, so please let us know, when you have any solution to this. Thank you!