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
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
See the dotdot template for an example of how this package is integrated with a Next.js project.
Publishing a release
This projects adheres to the Conventional Commits specification. This specification enforces commit message prefixes like
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
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.
- 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)
- 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
- 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