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

[dorka_horvath]

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!

[katiedavis · 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]

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

[hemantgoyal]

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

[hemantgoyal]

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!

[kevinjtsai]

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

[hemantgoyal]

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. 

[kevinjtsai]

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

[theothersteve]

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:

   

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]

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!

[theothersteve]

@Bosiyaw This solution seemed to work for me: https://community.shopify.com/c/Shopify-Apps/New-page-redirects-to-index-on-app-created-using-CLI/td...

It basically says that we need "to add the router.get for that page to the server.js file." So, here's what I added to my server.js file, and now I can see the "annotated-layout" page/tab in the app:

router.get("/annotated-layout", handleRequest);

The handleRequest variable is already defined earlier in server.js for handling pages:

const handleRequest = async (ctx) => {
	  await handle(ctx.req, ctx.res);
	  ctx.respond = false;
	  ctx.res.statusCode = 200;
	};

Not sure if this is THE 100% CORRECT solution (since it's not part of the tutorial), but it got me to the next steps. Good luck!

[Bosiyaw]

Hey @theothersteve,

thank you very much for your time and effort. But for me its still not working, its pure frustration ... i will read some more on this and hopefully will create some cool apps in the near future 🙂 Good luck!

[cthompson]

You should be able to append the handle to the end of the url anyway.  But, for some reason it does not work.  Not sure why.  This may be an oversite by the author.

[Gowtamsankar]

yes I followed still cant get annotated layout page

[theantipioneer]

Try restarting your computer that worked for me

[Bosiyaw]

Hello @katiedavis or the shopify team,

is there still no hands.on solution to this "enable cookies" and navigation routing problem? I would really like to dive deeper into app development with shopify but i cant get over this step. I also set up an app with the shopify app cli and its the same problem again. Its getting really frustrating so i would love to get a resolution on this topic. What i tried so far:

- Changing Browser
- Deleting Cache and Cookies
- Enabled cookies in the browser
- All solutions which got suggested in this thread
- set everything up with shopify app cli 

Its always the same - if i append the annotated-layout in the url or do a navigation menu, doesnt matter - i always get to a screen, where i should enable cookies and then get forwarded to my index page again, not even beeing able to click something because the enable cookie screen disappears so fast or timing out after that. 

Here is a Screencapture of the Problem: https://www.loom.com/share/8ab9a24a15654d0fb125fffea6700528

Best Regards

[tomasdelaveau]

I believe by adding that line of code you're skipping verification on that route, which is what this line does:

router.get("(.*)", verifyRequest(), handleRequest);

 I think the problem is related to cookies.