It feels like we haven’t explored a headless CMS for ages on the blog.
Strapi sounds like an excellent choice to come back to it 👌
It was already a solid product when we first wrote about it back in 2018. However, the team at Strapi didn’t stop the great work there. I can’t wait to see what it has to offer as of today.
In this tutorial, I’ll mix it up with two other powerful tools from the Jamstack ecosystem. The result? A Strapi-powered e-commerce website.
The frontend will be built using the neat Vue framework that is Nuxt.
The e-commerce functionalities will be provided by Snipcart, our JS/HTML shopping cart.
Here are the specific steps:
- Generating a Strapi app & creating products
- Consuming products with Nuxt.js
- Adding e-commerce functionalities with Snipcart
- Handling custom fields in the cart
- Integrating a GraphQL plugin
- Deploying the Strapi & Nuxt e-commerce app
Let’s start by meeting our players.
What’s up with Strapi?
Strapi is an open-source Node.js-based headless CMS. It’s 100% JavaScript, fully-customizable and developer-first.
It has made its way to the top of the most popular headless CMSs thanks to the flexibility it gives to devs to work with any tools they love.
Using Vue, React, or plain JS on the frontend? It doesn’t matter. Consuming the API with REST or GraphQL? Both options work seamlessly. Connecting PostgreSQL, MongoDB, SQLite, MySQL as database? All the same to Strapi.
In our last Strapi post, we highlighted another huge benefit a Node.js headless CMS brings: building apps that are entirely JavaScript—on the frontend and the backend alike. Welcome code universality, performance & easy npm install at every level!
This tutorial will showcase both the flexibility of Strapi and the power of Universal JS apps.
On another note, we’re big fans of the whole redesign the Strapi team did for their branding and marketing website lately. Looking sharp!
→ Read the full tutorial here
Top comments (0)