This document discusses building a headless e-commerce website. It evaluates different architectures including using a content management system (CMS) and e-commerce platform separately and connecting them via APIs. It recommends using Next.js for the frontend framework, Cockpit for the CMS due to its REST API, and building a custom e-commerce solution connected via GraphQL schema stitching. The document then discusses implementing the user interface with React and Apollo Client and providing a unified GraphQL API to the client.

1. Building a Headless Shop
Web Zürich 2018.05
PASCAL KAUFMANN

2. Mission Briefing
„Hey can you please
build our new website?
It must have Shopping,
CMS and all that stuff,
please send us a quote“

3. Mission Briefing
• We want an apple.com-style
Online Shopping Experience
(SPA)
• We are a startup and don’t have
a lot of money to spend
• We want to automate delivery
but don’t have an ERP system in
place yet

4. Architecture

5. Approach: CMS-Bound
• Use Wordpress/Drupal or any other
CMS together with some extensions
like WooCommerce
Shop as Plugin
Frontend as Theme
inside the Monolithic
Framework
More Weird Plugins
Customization

6. Approach: Shop-Bound
• Shop-Defined: Use Magento or any
other Shop together with some
extensions like „Magento Landing
Pages“
CMS as Plugin
Frontend as Theme
inside the Monolithic
Framework
More Weird Plugins
Customization

7. Approach: Headless
• Use CMS and Shop as services and
build the website the way you want
CMS API (Drupal Headless, Cockpit +
101 SaaS solutions and proprietary
systems)
Website
Project
Shop API (Magento Headless + 101
SaaS solutions and proprietary
systems)

8. Bucket List
• Find the right Web Framework that
meets your technical requirements (and
taste, obviously)
• Find the right CMS solution that meets
the requirements and exposes an API
• Find the right Shop solution that
meets the requirements and exposes an
API
• Build the thing

9. Evaluation
• 👍 Frontend: Next.js
• 👍 CMS: Cockpit
• 😡 Shop: Magento? Spree?

10. [...new Array(5)].forEach(☕)
After consuming 1000
coffees

11. Final Result
• 👍 Frontend: Next.js
• 👍 CMS: Cockpit
• 👍 Shop: DIY
https://getcockpit.com https://nextjs.org https://unchained.shop

12. Micro-Service Architecture
of freezyboy.com
GetCockpit:
SQLite
PHP
Next.js
Unchained.shop:
MongoDB
Node.js
Smallinvoice G Spreadsheets
Apollo GraphQL Server
Apollo GraphQL Client
React.js
Recompose
Stripe Elements
…
cms.freezyboy.com freezyboy.com
Next.js
admin.freezyboy.com
GraphQL
REST
REST
GraphQL
Wareho
use
E-Mail
Stripe, Paypal

13. 😎
• Real separation of concerns
• Evolutionary extendable web
platform
• Lets the developer chose her
own utilities

14. Data

15. Unchained has GraphQL

16. Cockpit has REST
Shall I really connect the Web App
to 2 different endpoints?

17. GraphQL Schema Stitching
1. Use the Next.js custom Server
feature to build a small GraphQL
server at /api

19. GraphQL Schema Stitching
2. Connect the resolvers to the
Cockpit API
// locations.js (resolver function for query locations)
module.exports = async (root, params, { api }) =>
api.find('Locations', params);
3. Actually stitch it

21. Proxy Ready

22. 😎
• One round trip from Client to
Server to rule them all
• Consolidated always-up-to-date
documentation of your API
through the GraphQL schema
language

23. User Interface

24. Next.js by Zeit
• React-opinionated Framework
• Folder-based routing and code-
splitting
• Server-side rendering
• Static HTML exports
• Growing Popularity
• See https://nextjs.org

25. React Apollo connected
components
https://github.com/unchainedshop/unchained-website/blob/master/
components/CartDropdown.js
https://github.com/unchainedshop/unchained-website/blob/master/lib/
withLittleCart.js

26. 😎
• Please stop waste your time
with JS build tools (!)
• You might not need Redux
• Apollo Client handles caching,
store rehydration and
reactivity for you

27. Build your next shop with
our headless technology
Thank you..
hello@unchained.shop
Unchained
℅ Fliptation GmbH
Mühlebachstrasse 6
8006 Zürich
unchained commerce

28. Some GraphQL Refs
• https://medium.com/@dan_abramov/you-might-
not-need-redux-be46360cf367
• https://hackernoon.com/how-graphql-replaces-
redux-3fff8289221d
• https://dev-blog.apollodata.com/the-next-
generation-of-schema-stitching-2716b3b259c0
• https://dev-blog.apollodata.com/introducing-
react-apollo-2-1-c837cc23d926
• https://www.apollographql.com
• https://graphql.org

29. Some React Refs
• https://www.codementor.io/
tgreco/5-of-the-many-things-
to-love-about-zeit-s-next-js-
bpszu99g1
• https://github.com/
unicodeveloper/awesome-nextjs