Shopify App Utils

This package provides a collection of utilities for wiring up Next.js projects as Shopify Embedded Apps.

• Session token authentication
• Embedded and "standalone" modes
• Polaris components for loading, error and guest pages
• Connect compatible middleware for OAuth callback and session token validation
• Standalone development mode without the need for ngrok using a mock shop name

Installation

Install the following packages into your existing Next.js project.

npm i @dotdev/shopify-app-utils @shopify/app-bridge-react @shopify/app-bridge-utils @shopify/polaris connect shopify-token --save

Usage

See the dotdot template for an example of how this package is integrated with a Next.js project.

Contributing

Publishing a release

This projects adheres to the Conventional Commits specification. This specification enforces commit message prefixes like feat: or fix:. These prefixes are used to automatically determine a version number.

When you're ready to release a new version, ensure you have your changes commited, and run the following.

# this will automatically determine the version number from conventional commit messages,
# bump all packages to that version in a "locked" fashion and write to the CHANGELOG file
npm run release

# when a new tag is pushed, GitLab CI will take care of publishing the packages to npm
git push --follow-tags

Why not use shopify-app-node?

Shopify recently released their own Next.js based framework for embedded apps, called shopify-app-node. This works much the same way as this project, but has a number of drawbacks.

1. Shopify have a habit of abandoning open-source projects in a very short time frame, especially node projects (they primarily use ruby on rails internally)
2. The Shopify implementation does support session tokens, but also uses cookies for authentication which cannot be disabled which leads to merchants getting "stuck" in a session, and bouncing around OAuth until the app loads
3. Ngrok must be used for local development which involves setting up a dedicated Shopify app which points to the ngrok URL, then loading that through the app iframe which loses hot module reloading, requires a full refresh after every update and is generally much slower than the standalone development mode offered by this package - if multiple developers are working on the project, they must each setup their own dedicated Shopify app
4. The Shopify implementation does not provide any app-specific session middleware hooks, beyond giving you the Shopify token to use in API requests, therefore it's difficult to setup additional authentication like Firebase Auth as it's designed to only communicate with Shopify, not third party APIs like Firebase