Building Headless Commerce middleware - B2Storefront: An Overview of Our TTechnology Choices
B2storefront is a platform that consists of multiple components.
Connector - fetch data from multiple data sources and return into flat compiled and ready for usage form
Headless - Storefront that output SSG or SSR front-end
To build those components we use various solutions, tools and frameworks that are outlined here:
We use NodeJS to create serverless functions. Those serverless functions are deployed on platforms like:
- Netlify
- AWS
- Cloudflare
For custom backends or self-hosted CMS'es we use DigitalOcean
For Data Backend to JSON REST API we used to utilize Strapi and we still like this headless CMS a lot.
However for typical Back-end our preference is Supabase now. Especially with their Supabase Edge Functions.
Before Supabase we used Fauna DB main idea to use them was their out of the box multi-tenancy
we went long path from React to GatsbyJS to ... Hugo
Why Hugo? mainly because it outputs pretty much everything it's output is a string it can be HTML it can be even PHP it can be React but we like it because it outputs a pure HTML and this way everything that is embedded or 3rd party injected scripts would work just fine like it works with classic HTML
So we use Hugo as our Template language to output HTML.
for CSS Framework we use tinified Twitter Bootstrap, mainly because using Tailwind is basically throwing obfuscated pseudo-css directly into the classname attribute.
SCSS to compile it then to CSS
npm is used as a build tool
for Deployment we use:
Bitbucket Pipelines
Github Actions
Auto deploy to Netlify based on push to the repository
Step functions for AWS
Storage
to store persistently data we either use Supabase in case we need a database or Git repository for populated JSON files that B2storefront Connector is generating from fetched data. We also can store .md files with JSON snapshots of data in S3 in case we use AWS as a hosting for the final deployment.
Surprisingly we also use for custom data structures that supposed to be used inside Shopify native shopify metafields that store a JSON output that comes from Strapi.
Observability
monitoring for the errors is splitted into backend error monitoring that is handled by Betterstack and Sentry that is used to catch a runtime errors on the user side.
We used New Relic as well. For on-call shifts management and putting alarms Atlassian OpsGenie was quite cool.
Background Jobs
we used queues like RabbitMQ for background jobs as well as Gatsby Cloud (before it was acquired by Netlify) to run SSG builds based on data from bulk graphQL API from Shopify.
Currently for background jobs we use Step functions on AWS
Documentation
we don't have it... but we want badly to start having it so for now we setup a Wiki on Github
Webhooks
Webhooks are essential part of workflows we setup, we used to use Shopify webhooks to trigger SSG builds until figured out it's a Tsunami of them because each app touching a product in Shopify also trigger a webhook. We explored multiple webhooks orchestration platforms but end up using none.
Testing
similar to documentation we know testing is important but we barely moving out from manual QA to Cypress, we used cypress a lot and it was giving 2 types of head ache - if we use it for visual testing it was alarming that smth is not right because formatting of text just slightly changed, if we used it for functional tests then either tests were failing or tests were way behind of the code we developed. This area needs to be revisited.
Code styling
Prettier is going to be used but we don't have anything serious in place, main issue is inability to find smth meaningful for Liquid, currently exploring liquid prettier by Shopify itself.
Miscellaneous
tools and helpers we use across the projects
- Monolog - for logging
- pm2 - for nodejs process monitoring and orchestrating
- Octauthnet - to make password protected endpoints using Cloudflare