Summary:
links in documentation are broken

Reproduce:

1. Goto https://github.com/Shopify/shopify-app-examples/tree/main/qr-code/node#hosting
2. Click fly.io link

Expected:
Goto fly.io hosting documentation page at https://github.com/Shopify/shopify-app-examples/blob/main/qr-code/node/web/docs/fly-io.md

Actual Result:
404 not found
Goes to https://github.com/Shopify/shopify-app-examples/blob/main/web/docs/fly-io.md

Seems like project's directory structure was changed but link not updated. It's missing "/qr-code/node/"

Hi guys, I'm working on an app that collects information from customers on the storefront. In my theme app extension, I make a POST request to my server, but I don't see the body.

From the tutorial, this is how the server middleware was applied.

  applyPublicEndpoints(app);

  // All endpoints after this point will require an active session
  app.use(
    '/api/*',
    verifyRequest(app, {
      billing: billingSettings,
    })
  );

  // All endpoints after this point will have access to a request.body
  // attribute, as a result of the express.json() middleware
  app.use(express.json());
  applyPrivateEndpoints(app);

But I need to be able to make a post request from the embedded app I'm working on. So I moved the express.json call above my public middleware like so.

  // All endpoints after this point will have access to a request.body
  // attribute, as a result of the express.json() middleware
  app.use(express.json());
  applyPublicEndpoints(app);

  // All endpoints after this point will require an active session
  app.use(
    '/api/*',
    verifyRequest(app, {
      billing: billingSettings,
    })
  );
  applyPrivateEndpoints(app);

But I'm still unable to access the request body. It simply shows an empty object. I'm not if this is an expressjs issue or if there's a Shopify specific something I'm missing. Any help is appreciated.

Hey, Guys!

New app structure is very great!

We have just small issue with custom environments with local development, where to put .env file?
Tried 3 folders and our custom variable is undefined!

Hey there,

I am having a weird issue that doesn't seem to be happening when the app is hosted locally thru the ngrok tunnel. I've deployed my app as per instructions to Heroku. When trying to visit the app, the user is being put into an infinite redirect loop as per the following image:

The redirect URL is trying to send the user to this page: https://myapp.herokuapp.com/api/auth/callback?shop=mystore.myshopify.com&host=Z2FtZXJnYWRnZXRyeS5teXNob3BpZnkuY29tL2FkbWlu

This endpoint's code is this:

 app.get("/api/auth", async (req, res) => {
    return redirectToAuth(req, res, app);
  });

Which then redirects the user to this:

export default async function redirectToAuth(req, res, app) {
  if (!req.query.shop) {
    res.status(500);
    return res.send("No shop provided");
  }

  if (req.query.embedded === "1") {
    return clientSideRedirect(req, res);
  }

  return await serverSideRedirect(req, res, app);
}

function clientSideRedirect(req, res) {
  const shop = Shopify.Utils.sanitizeShop(req.query.shop);
  const redirectUriParams = new URLSearchParams({
    shop,
    host: req.query.host,
  }).toString();
  const queryParams = new URLSearchParams({
    ...req.query,
    shop,
    redirectUri: `https://${Shopify.Context.HOST_NAME}/api/auth/callback?${redirectUriParams}`,
  }).toString();

  return res.redirect(`/exitiframe?${queryParams}`);
}

So it appears the code from the app is "working properly" but I am not sure why everyone isn't getting infinite redirects. If I copy and paste the address in the redirect URL parameter, and visit that outside the context of the app, it brings me to my App's page and things appear to work. Would appreciate any insight!

Hello is there any plan for a typescript example, after the cli v3 changes and the new Client React app with express it would be really useful for a starter with typescript :)

Hi all! 5th time, I'm trying to follow the path of creating an application according to this manual https://shopify.dev/apps/getting-started/create
And this is the 5th time I get this error.

After this step https://i.imgur.com/sYGCr4t.png i get https://i.imgur.com/TnzgyKt.png

I would like to use an URL that I'm exposing on my backend to handle the logic that comes from auth.$.jsx. The solution would be turn the auth.$.jsx a kind of middleware that redirects the request to my endpoint.

But I would like to know if is there a way to customize the redirect_uri that the Remix App produces for me, instead of the /auth (by default), I would like to target my other endpoint o authPathPrefix.

I'm unable to run the QRCode node example app. It says that the QRCodesDB object cannot be accessed before initialization. There seems to be a circular dependency as the shopify object in the web/shopify.js file is required in the qr-codes-db.js file and vice versa

In the repo we need to make these changes to match the template:

• Remove unnecessary redirects. See changes here
• Replace app bridge redirects with HTTP redirects. See changes here and change here

In the tutorial itself we need to be sure that none of the code you have to copy and paste is affected by these changes. If any is, we should update the dev docs.

Hi guys,

I think the links to Fly.io and Heroku are missing from the docs
https://github.com/Shopify/shopify-app-examples/blob/main/web/docs/heroku.md
https://github.com/Shopify/shopify-app-examples/blob/main/web/docs/fly-io.md

When first running app, error appear for missing modules: "aws-sdk", "nock", "mock-aws-s3".

After installing them using npm, app runs normally but after opening it through the preview link, in the editor console many errors appear along the lines of Vite Error: optimized info should be defined. Sometimes other errors appear in the brower's console Uncaught ReferenceError: global is not defined at ../../node_modules/buffer/index.js and Websocket closed before establishing.

These are my package.json files:

// shopify-app-examples/qr-code/node/package.json
{
  "name": "qr-code-sample-app",
  "version": "0.1.0",
  "main": "web/index.js",
  "license": "UNLICENSED",
  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "push": "shopify app push",
    "scaffold": "shopify app scaffold",
    "deploy": "shopify app deploy"
  },
  "dependencies": {
    "@shopify/app": "^3.21.0",
    "@shopify/checkout-ui-extensions-react": "^0.24.0",
    "@shopify/cli": "^3.21.0",
    "axios": "^1.3.4",
    "firebase": "^9.17.2",
    "react": "17.0.2",
    "sqlite3": "^5.0.8"
  },
  "author": "Shopify",
  "devDependencies": {
    "@types/sqlite3": "^3.1.8"
  }
}

// shopify-app-examples/qr-code/node/web/package.json
{
  "name": "shopify-app-template-node",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "debug": "node --inspect-brk index.js",
    "dev": "cross-env NODE_ENV=development nodemon index.js --ignore ./frontend",
    "serve": "cross-env NODE_ENV=production node index.js"
  },
  "type": "module",
  "engines": {
    "node": ">=14.13.1"
  },
  "dependencies": {
    "@shopify/shopify-app-express": "^1.0.0",
    "@shopify/shopify-app-session-storage-sqlite": "^1.0.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "qrcode": "^1.5.0",
    "serve-static": "^1.14.1"
  },
  "devDependencies": {
    "jsonwebtoken": "^8.5.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.6.2",
    "pretty-quick": "^3.1.3"
  }
}

// shopify-app-examples/qr-code/node/web/frontend/package.json
{
  "name": "shopify-frontend-template-react",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "coverage": "vitest run --coverage"
  },
  "type": "module",
  "engines": {
    "node": ">= 12.16"
  },
  "dependencies": {
    "@shopify/app-bridge": "^3.1.0",
    "@shopify/app-bridge-react": "^3.1.0",
    "@shopify/app-bridge-utils": "^3.1.0",
    "@shopify/polaris": "^9.11.0",
    "@shopify/react-form": "^2.4.1",
    "@shopify/react-hooks": "^3.0.2",
    "@vitejs/plugin-react": "1.2.0",
    "dayjs": "^1.11.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.3.0",
    "vite": "^2.8.6"
  },
  "devDependencies": {
    "history": "^5.3.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.6.0",
    "vi-fetch": "^0.6.1"
  }
}

We received the following user feedback that (I think!) relates to the README file in this repo:

I think this is no longer valid, I followed the instructions on the github and it couldn't save data when trying to add a qr code.

It might be worthwhile double-checking that the guidance in the README is still up-to-date.

Related feedback issue: https://github.com/Shopify/shopify-dev/issues/32538

Going through step 4 on the app example it uses AppBridge.hostOrigin to return the store URL:

const data = { host: appBridge.hostOrigin, productHandle: handle.value || selectedProduct.handle, discountCode: discountCode.value || undefined, variantId: variantId.value, };

However per this issue, appBridge.host was not intended for part of the public API and now returns the admin URL and not store URL.

Would be good to have the example app updated to read the storefront URL.

In the file web/shopify.js :

const dbFile = join(process.cwd(), "database.sqlite");
const sessionDb = new SQLiteSessionStorage(dbFile);
// Initialize SQLite DB
QRCodesDB.db = sessionDb.db;
QRCodesDB.init();

We cannot access to the property sessionDb.db because the attribute SQLiteSessionStorage.db is private :

export declare class SQLiteSessionStorage implements SessionStorage {
    private filename;
    private options;
    private db;
    private ready;
    constructor(filename: string, opts?: Partial<SQLiteSessionStorageOptions>);
    storeSession(session: Session): Promise<boolean>;
    loadSession(id: string): Promise<Session | undefined>;
    deleteSession(id: string): Promise<boolean>;
    deleteSessions(ids: string[]): Promise<boolean>;
    findSessionsByShop(shop: string): Promise<Session[]>;
    private hasSessionTable;
    private init;
    private query;
    private databaseRowToSession;
}

So, it result with this error :

2022-12-30 17:59:27 | backend  | this.db = this.db ?? new sqlite3.Database(DEFAULT_DB_FILE);
2022-12-30 17:59:27 | backend  |                        ^
2022-12-30 17:59:27 | backend  |
2022-12-30 17:59:27 | backend  | TypeError: Cannot read properties of undefined (reading 'db')

https://github.com/Shopify/shopify-app-examples/blob/main/qr-code/node/README.md

Above file has multiple broken links.

SessionStorage Adapters
fly.io
Heroku

ERROR Cannot read properties of null (reading 'useContext')

node_modules/@shopify/app/node_modules/react/cjs/react.development.js:1618:21

1615: }
1616: }
1617:
1618: return dispatcher.useContext(Context);

Link results in 404 when searching for additional instruction on deployment storage solutions.
https://github.com/Shopify/shopify-api-js/tree/main/src/auth/session/storage

I was receiving various vite proxy & connection-related errors e.g.
│ frontend │ 9:10:42 PM [vite] http proxy error: │ frontend │ Error: socket hang up │ frontend │ at connResetException (node:internal/errors:717:14) │ frontend │ at Socket.socketOnEnd (node:_http_client:519:23) │ frontend │ at Socket.emit (node:events:523:35) │ frontend │ at endReadableNT (node:internal/streams/readable:1367:12) │ frontend │ at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

but the initial error was:
│ backend │ [shopify-app/ERROR] Could not check if session was valid: TypeError: scopesArray.map is not a function | {shop: textline-integration-test-store.myshopify.com}

& I finally just solved it. I just needed to upgrade my version of shopify-app-express in web/package.json to 2.0.0. I’ll try to let the github community know about it. Credit Shopify/shopify-app-template-node#1208 (comment)

It took me a while to find this answer, so I just figured that I'd post this under "issues".