Small example Shopify embedded app with React and NextJS and routing that is visible in the top level domain.
Example app shows a list of customers retrieved with GraphQL via the Shopify API.
Each customer links to a dynamic route which shows a detail page.
There is also an example static route.
The routing is exposed in the top level domain of the Shopify Admin.
The Shopify CLI was used to create the boiler template.
Uses JWT session token for authentication.
Not provided by the Shopify CLI, routing doesn't cleanly work within the embedded app without passing this component to the Provider
.
Has multiple routes, both static and dynamic and nested, and uses the RoutePropagator to expose the routing in the top level domain.
The following steps require a Shopify Partner account and access to a dev store.
- Clone this repo to a local directory.
- Run
npm install
to install all dependencies. - Run
shopify serve
ornpm run serve
(as seen in the package.json file) to start the ngrok tunnel on which the app will run. - Fill in the name of the Shopify dev store when required.
- Follow the link in the command tool to install the app on your dev store.
- Visit your dev store and launch the app.
Shopify CLI by Shopify
CustomLink Component by Leigh Barnes
RoutePropagator from example by Gil Greenberg