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

Solved
Highlighted
New Member
2 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
Highlighted

Success.

Shopify Staff
Shopify Staff
39 7 7

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.

1 Like
New Member
2 0 0

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

0 Likes