"No shop provided"

[postprodigy]

I’m running an Express server with Next.js and using the @Shopify_77 /shopify-app-express middleware to handle authentication with Shopify.

When I install my app I see 400 status codes where the browser is trying to fetch Next.js bundles with message “No shop provided”

It looks like the sample QR Code app which works orchestrates serveral tasks like adding URL params shop and host through the shopify command in the CLI.

So this is probably my problem? But I don’t see any documentation explaining what needs to be done if we aren’t bootstrapping through this Shopify CLI..

There should be a minimal example or documentation that clearly describes what Shopify authentication middleware is expecting here beyond “No shop provided”?

(For developers to use bootstrapped examples, would be easier if they were stripped down so they aren’t these massive projects that do hidden stuff through CLI like the current template.. plus some documentation describing what automated tools are doing otherwise. Currently this feels like work big black box with no idea what’s going on or how to debug.. Just my 2 cents)

Thanks,

Joseph

[snokown]

Thanks for posting this - I’m new to Shopify development as well and this has been SUPER confusing. I’ve been searching for solutions for days and this is the first time I’ve seen someone mention this.

The tutorial is full of “paste in this giant code block” sections and while it’s decently commented code, it’s still a lot to take in for a new Shopify dev. Agreed - I would love to see a minimal example and leave it up to me as the developer to abstract and change things as I see fit.

[postprodigy]

For anyone who comes across this.. It looks like there are multiple ways to authenticate your service with Shopify and fulfill the required authentication URLs.. (I wish Shopify would simplify their dev tools and docs to open this up to more devs! Make the APIs, libraries, and docs simple.. You have session tokens, required callbacks, query parameters, component library, and an iframe bridge, how complex does it need to be?)

Here is a straightforward code block for an Express with Next.js server using the @Shopify_77 /shopify-app-express as best as I canunderstand it right now.. I can make this into a template if anyone is interested

src/server/index.ts

import express, { Request, Response } from "express";
import next from "next";
import { ShopifyApp } from "../app";
import { isProdEnvironment, getPort, getHostname } from "../config";
import { webhookHandlers } from "../gdpr";
import { initApiRoutes } from "../api";

async function init() {
const nextApp = next({
dev: !isProdEnvironment(),
hostname: getHostname(),
port: getPort(),
});

const expressApp = express();
expressApp.use(express.json());

expressApp.get(ShopifyApp.config.auth.path, ShopifyApp.auth.begin());
expressApp.get(
ShopifyApp.config.auth.callbackPath,
ShopifyApp.auth.callback(),
ShopifyApp.redirectToShopifyOrAppRoot()
);
expressApp.post(
ShopifyApp.config.webhooks.path,
ShopifyApp.processWebhooks({ webhookHandlers })
);

expressApp.use(
"/api",
ShopifyApp.validateAuthenticatedSession(),
initApiRoutes(express.Router())
);

await nextApp.prepare();
const handler = nextApp.getRequestHandler();

expressApp.get("*", (request: Request, response: Response :disappointed_face: Promise<void> => {
return handler(request, response);
});

const server = expressApp.listen(getPort(), async () => {
console.log(" :rocket: Server ready!");
});
}

init();

src/app/index.ts

import { shopifyApp } from "@shopify/shopify-app-express";
import { restResources } from "@shopify/shopify-api/rest/admin/2023-01";
import {
getHostname,
getPort,
getShopifyApiKey,
getShopifyApiSecretKey,
} from "../config";
import { sessionStorage } from "../db";
import { LATEST_API_VERSION } from "@shopify/shopify-api";

const SHOPIFY_SCOPES = ["read_script_tags", "write_script_tags"];
const SHOPIFY_PROTOCOL = "http";

export const ShopifyApp = shopifyApp({
api: {
apiKey: getShopifyApiKey(),
apiSecretKey: getShopifyApiSecretKey(),
apiVersion: LATEST_API_VERSION,
hostName: `${getHostname()}:${getPort()}`,
hostScheme: SHOPIFY_PROTOCOL,
isEmbeddedApp: true,
restResources,
scopes: SHOPIFY_SCOPES,
},
auth: {
path: "/api/auth",
callbackPath: "/api/auth/callback",
},
webhooks: {
path: "/api/webhooks",
},
sessionStorage,
});

[st_consult]

Hi @postprodigy ,

I am very much interested and would love to see such a template!

Actually, all I am trying to achieve is to run a server with a REST API in a container. My Shopify is a custom app, so things should even be easier compared to public apps. But it’s a really frustrating experience and I can’t get it running.