Build a Shopify app with Node and React tutorial 2020

Highlighted
New Member
6 0 0

I've gone through the first steps of the tutorial for embedding a public app into Shopify Admin but when I test the app in the Development store it won't open in the iframe. Instead, when I click to view the app, the browser renders the screen with the app name but then you can see the url updating through the auth flow. Once that completes the browser redirects to the domain URL for where the app lives instead of displaying the result in the iframe.

 

I've double checked many times and confirmed I have setup according to the tutorial. I've uninstalled the app and reinstalled, restarted the node server, and disabled/re-enabled embedded extension; none of this works. Is it possible I am missing a new config flag of some kind that has recently been updated for 2020 but not yet updated in the tutorials?? Server code is below based on that tutorial. Please help.

 

require("isomorphic-fetch");
require("dotenv").config();

const Koa = require("koa");
const next = require("next");

const { default: createShopifyAuth } = require("@shopify/koa-shopify-auth");

const { verifyRequest } = require("@shopify/koa-shopify-auth");
const session = require("koa-session");

const port = parseInt(process.env.PORT, 10) || 3000;
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;

app.prepare().then(() => {
  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;
        ctx.redirect("/");
      }
    })
  );

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

  server.listen(port, () => {
    console.log(`> Ready and listening on http://localhost:${port}`);
  });
});
0 Likes
Highlighted
Shopify Staff
Shopify Staff
39 7 8

Hi @jbool24 ,

 

This is the second report we've gotten about this! So something is up. Can you paste your package.json here for me? Thanks!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
8 1 1

Hi, when the app refuses to redirect back into the Shopify Admin, are there any errors in your browser console?

0 Likes
Highlighted
New Member
6 0 0
{
  "name": "shopify-embedded-test",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=production node server.js",
    "dev": "node server.js",
    "build": "next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@shopify/koa-shopify-auth": "^3.1.53",
    "dotenv": "^8.2.0",
    "isomorphic-fetch": "^2.2.1",
    "koa": "^2.11.0",
    "koa-session": "^5.12.3",
    "next": "^9.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
0 Likes
Highlighted
New Member
6 0 0

Nope.


@Tyler_Ball wrote:

Hi, when the app refuses to redirect back into the Shopify Admin, are there any errors in your browser console?



No errors in the console. there was a quick flash of a warning about timeouts but that was it.

0 Likes
Highlighted
New Member
6 0 0

@Tyler_Ball @katiedavis Any updates to this??

0 Likes
Highlighted
Shopify Staff
Shopify Staff
11 0 3

Try setting up the embedded navigation. I was also going through this tutorial and experienced the same issue, but then when I reached this step it was resolved.

 

 https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with...

0 Likes