New page redirects to index on app created using CLI

Solved
scole954387
Excursionist
19 1 10

Good day.

I'm learning node.js and shopify app development.  I installed shopify's CLI and created a node.js app.  I have everything working (app installed, ngrok, etc) and the generated app works when I log into the store and access it.  The index displays and any changes I make are reflected inside the app online.

The problem I'm having is being able to add additional pages other than the index.  I'm unable to find any tutorials that help walk through what to do after the app is generated from the CLI.  I've been trying to use this tutorial (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react).

Following the steps in that tutorial I created the annotated-layout.js file and added the code.  

When I try to go to myshopifydomain/myappname/annotated-layout is just redirects back to the index again.  Any thoughts on what I'm missing?

Thanks!

Accepted Solution (1)

Accepted Solutions
scole954387
Excursionist
19 1 10

This is an accepted solution.

I figured it out.  I think I need to go back and do a few more node.js crash courses. 

I needed to add the router.get for that page to the server.js file for those newbies like me who might be stuck here too.  I just copied the root and added /test for the test.js file I created.

 

router.get("/test", async (ctx) => {
    const shop = ctx.query.shop;

    // This shop hasn't been seen yet, go through OAuth to create a session
    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      ctx.redirect(`/auth?shop=${shop}`);
    } else {
      await handleRequest(ctx);
    }
  });

 

If a more experienced programmer has some suggestions or advice if this code is not technically correct please let me know.  I'm still learning and no idea what I'm doing at this point.

 

View solution in original post

Replies 5 (5)
scole954387
Excursionist
19 1 10

Also this might help too.

When I go to admin, apps, and click the app.  It will load outside of shopify for a second and then redirect to be embedded.

Once it does this the url changes from:

myshopify.com/admin/apps/mytestappname

to

myshopify.com/admin/apps/af6f61a1349481628e7bbc959e93bb74/?shop=mystore.myshopify.com

 

I haven't made any changes to the app generated by the CLI so I don't know if this is suppose to happen or if there's something else that's going on.  I assume that the app generated from the CLI is a functional app.

scole954387
Excursionist
19 1 10

This is an accepted solution.

I figured it out.  I think I need to go back and do a few more node.js crash courses. 

I needed to add the router.get for that page to the server.js file for those newbies like me who might be stuck here too.  I just copied the root and added /test for the test.js file I created.

 

router.get("/test", async (ctx) => {
    const shop = ctx.query.shop;

    // This shop hasn't been seen yet, go through OAuth to create a session
    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      ctx.redirect(`/auth?shop=${shop}`);
    } else {
      await handleRequest(ctx);
    }
  });

 

If a more experienced programmer has some suggestions or advice if this code is not technically correct please let me know.  I'm still learning and no idea what I'm doing at this point.

 

JasonR66
New Member
1 0 0

Cheers, had the exact same issue 🙂

with_coffee
New Member
2 0 1

Same, thanks! I've spent a couple of hours trying to figure this out. It threw me off because that route definitely wasn't in the tutorial's server.js file. 

Cory113
New Member
2 0 0

Added the router but how does the redirect url look? Do you attach the /test at the very end of the url after the host part or does it go directly after the store?