Trouble embedding my app after following "Build a Shopify App with Node.js and React" tutorial

EugeneKim
Shopify Partner
60 3 27

Hello,

 

I'm following the Build a Shopify App with Node.js and React tutorial and I'm stuck on on Step 3. Embed your app in Shopify.

 

Loading https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com results in a successful app install and I'm brought to my ngrok URL outside of Shopify as expected.

 

The issue is that I'm unable to access my app embedded within the Shopify UI. When I click on the app in my list of apps there are some redirects that happen and I'm eventually brought back to my ngrok page, completely outside of Shopify.

 

Two questions:

  1. What's preventing the application from being loaded in embedded UI?
  2. Once the app is installed, is it expected behavior to redirect the user outside of Shopify? I'd like to keep the installation experience entirely inside of Shopify.

Here is my server code (NOTE: I've slightly modified the code and project structure to run via Typescript):

 

import 'isomorphic-fetch';
import dotenv from 'dotenv';
import Koa from 'koa';
import next from 'next';
import createShopifyAuth, { verifyRequest } from '@shopify/koa-shopify-auth';
import session from 'koa-session';



const startServer = async () => {
  dotenv.config();

  const port = parseInt(process.env.PORT, 10);
  const dev = process.env.NODE_ENV !== 'production';
  const app = next({ dev });
  const handle = app.getRequestHandler();

  const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

  await app.prepare();
  
  const server = new Koa();
  
  server.use(session(server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products'],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        console.log('We did it!', accessToken);
        ctx.redirect('/');
      },
    }),
  );

  server.use(verifyRequest());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
};

startServer();

 

Any assistance would be much appreciated.

 

Thank you!

Replies 2 (2)

EugeneKim
Shopify Partner
60 3 27

Strangely enough after going through the instructions a second time the app embeds in the Shopify UI as expected. Might someone provide clues as to why this might have happened? Thank you!

Liam
Shopify Staff
2731 290 743

Hi there @EugeneKim, Liam from Shopify here.

 

Glad to hear your app is now embedding in the Shopify UI, but it's tricky to determine why you were having issues previously. It's possible the server needed to be reset in order to connect. If this continues, can you get back in touch and we can help troubleshoot this?

 

Cheers,

 

Liam

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog