SHIFT Serverless Store 🎉
The serverless store is an example of building NextJS applications with the serverless API's and statically generated content. This application ships with the @shiftcommerce/use-shift library written in Typescript and packaged within a yarn workspace. The library attempts to be a light weight API layer which returns strongly Type JSON API interfaces that can be generated from the existing SHIFT commerce API schemas. The library has a Client and Server component.
Host with Popular Tools
This site can be (is) hosted on multiple serverless technologies. If you want to check out the various versions just try clicking the buttons. The site is a carbon copy on every domain, so don't worry about coming back.Your current host is highlighted too.
SHIFT API Serverless Router
This application uses the ShiftServer library written in Typescript. The ShiftServer acts as a middleware, with no NextJS specific dependencies, so it could be used (and is used) in AWS Lambda or in Express. To get started mount the server in NextJS API routes at pages/api/shift/[...useShift].(js|ts).
This exposes all the routes required for use with Client Side hooks and includes; Cart Cookie Issuing, Add to cart, Checkout, and Order Submission. It does not include Payment gateways; but there is an example implementation in this application that shows how to use SHIFT payment transactions with Stripe.
SHIFT API Client
This application ships with the ShiftApiClient library written in Typescript.
The library attempts to be a light weight API layer that returns typed JSON API responses.
Example
This example shows how all the data is fetched for the page you are viewing now. The ShiftApiClient is returning a IProductsResponse.These interfaces add type annotations to raw JSON API data, they do not transform the data, as this would obscure the API client.
We have told next to use this data as the static props for the pages, and refresh the static page every hour. This means that it will continually serve static content, and do a background refresh. If you need dynamic content on the Client side you should use a Hook...
SHIFT Client Hooks
The client side information e.g. the cart, is fetched via Hooks to serverless API routes.
Click on the cart to see these in action 🖱
Thats all there is to it. The hook encapsulates the data fetching, caching and mutation.
To make it even easier the cart has some mutations like addLineItem, updateCart, and createOrder.
These can be destructured out of the useCart hook!, oh and API for these hooks is typed, so no need to worry about reading the docs!!!
The cart implements useSWR but decorates the returned Type with the described helper methods.
Content
This is the SHIFT serverless store, you won't find any servers for sale!
The store renders most of its contents statically with incremental revalidation. It takes the mega-nav at build time and searches through the tree to find all pages worthy of rendering ( Speaking of the mega nav, that is also static. ).
This method allows you to use any tenant to render an entire site from the Menu and means that local development against your own tenant from seeds is 100% possible with just the tenant name and API key 😲.
Time to do some shopping, the checkout is setup with stripe and V1 order integration.
Road map
This project aims to be a recipe book for hooking into the SHIFT data layer on the client side and delivering value around cart state management and checkout processes.
- Add support to select V1, V2 or Direct to OMS order submissions at deploy time with full support for middleware like Cart transforms for Tax and Promotions etc.
- Optimise in memory caching for stale while revalidate for API. This library allows mutation of an in memory cache after successful updates to the restful resource.