Strapi - headless CMS for e-commerce
What is Strapi?
Strapi is a frontend-agnostic CMS. As in CMS, it is used for content managament and serves as a backend for projects like websites and shops. You can configure your Strapi backend with various frontends, like Next.js or React.
Benefits of open source and customization
Strapi is completely open source when using community edition, which has most of the useful functions. Companies might consider choosing Enterprise or Cloud versions that are paid for benefit of additional Strapi team support or in case of Cloud, hosted option. Being open source by default means that we can dive into the source code at any time.
Strapi is highly customizable and from its core you can extend it to serve in a way that the owner needs. The variety of available plugins and the tools to create one or extend existing are handy when customizing CMS.
Where to start?
You can simply create the project by running the command below or using a yarn alternative:
npx create-strapi-app@latest my-project --quickstart
Setup your app
By default Strapi uses SQLite, but you can also choose postgres or other relational or no-SQL database system. You can also choose whether you like to work with vanilla JavaScript exclusively or enable TypeScript.
Alrighty... let's go!
To first login, create an account, which will create the first superuser. You can also add different admins later through admin panel or via the CLI. Then use your credentials and admire the admin panel on the localhost:1337/admin!
Remember you can always look up the docs to get on board with how Strapi works.
Image Source: own work
Content management
Strapi utilizes the admin panel written in React.js, that enables quick and easy managament of the content.
Tools to help manage your content
Content Manager (CM) and Content-Type Builder are built-in plugins that are core of the admin panel. In the CM you can view content types, and in the builder you can edit existing ones - add new fields or components to them and define new types. So preferably Content Manager is a place where authors and editors work and Content-Type Builder is more suitable for admins and developers.
Photo by KOBU Agency on Unsplash
Roles and permissions
Talking about roles - RBAC plugin introduces Public and Authenticated roles, as well as super admin and other roles. You can define your own roles that are most suitable for particular projects. For example, you would split up permissions for editors of the different sections of your website.
Models
Strapi introduces two data types: collections and single types. In addition two data structures exist: components and dynamic zones. All of these have fields, which can be custom. Let's dive into it.
Data types
Strapi utilizes two main data types. Collection type is a data type for elements that have multiple entries (for example - articles) and single types are meant for more limited use (for example homepage or policy - one per localization).
Components and dynamic zones
Components are reusable pieces of data that you can put in the data types and dynamic zones are like blocks of components in which you can dynamically allocate them. I like to think of dynamic zones as the whole sections of components grouped together in a logical sense.
Custom fields
Everything that is not available out of the box in the Strapi, you can just create from scratch. Maybe your project requires some custom logic in the collection type field. You can create a custom field to achieve the desired behaviour - some React skills comes in handy in that case, because you'll need to design a new field from scratch.
Request-response flow
Strapi backend server is based on Koa.js - lightweight server side Javascript framework. When you send requests through the REST API, a context object (ctx) is passed to the Strapi services, controllers and middlewares.
When a request is sent via REST API or GraphQL API, it comes through global middlewares, it hits the routes - route policies and route middlewares and the payload is handled in the services and controllers.
Controllers and services also utilizes two API's - Query Engine, used for queries and mutations on the data types (collection and single types) on the lower level and Entity Service which can also be used for CRUD operations, but can fetch the whole content with its components or a dynamic zone.
At the end, the response is sent back to the ctx object and comes through middlewares again.
Source: Strapi Docs
Customization
There are ton of customization options and plugins are usually the way to go. Some built-in plugins like Content Manager and Content Type Builder are necessary to benefit from fully functional CMS. Other official plugins are ready to install - for example scheduler or email service. You can also take advantange of the community plugins that are present in the marketplace. An example plugin could be some third party service proxy.
You can also design your own plugins. Maybe you want to connect some service to Strapi and cannot do it natively or via available plugins. Maybe you need a custom field or a specific design for the admin panel. So the use case would be the need for something highly specific for your project. And of course - you can edit existing plugins as well.
Photo by Glenn Carstens-Peters on Unsplash
Versions
Community edition is the free version of the Strapi. You'll get the core features from it. If your organization needs it, you can decide to use paid Enterprise edition with some additions like Single Sign On (SSO) and Enterprise Support.
The relatively new option is Cloud edition that offers host option in the cloud, it's also a paid option.
Update: Strapi also introduced Developer, Pro and Team plans. Check the pricing page to learn more.
Deployment
As mentioned above, Strapi can host your application in the cloud in the Cloud edition. But if you stick with Community edition, you'll have to host your project yourself.
Strapi can be launched from a Dockerfile and via docker-compose. It needs some environment variables set to properly launch. Production and development images differ a lot due to the admin panel being built differently during the process.
Typical use cases
We can use Strapi content managament for example for:
- Any kind of website,
- Blog,
- Online shops (e-commerce),
- Forms...
...and much more. You could probably use it for an online game, though I've never heard of that. Let me know in the comments what use cases could be interesting options to utilize Strapi powers!
Photo by Blake Wisz on Unsplash
Companies using Strapi
Some companies use Strapi in their projects. Examples:
- Tesco - rework of the internal portal,
- Societe Generale - training site,
- Walldecaux with Google Germany - advertisement assets displayed on the screens
You can find more companies at this link.
To summarize - is it worth it?
Let's wrap it up and list pros for using Strapi:
- Open source - free options and a peek into the source code for everyone,
- Active community,
- Highly extensible and scalable,
- Option to self-host or use Cloud edition,
- Easy to use, either for developers, authors or content editors,
- Headless - use whatever frontend suits you
There some cons to consider as well:
- Community is not the largest,
- Documentation could be more extensive, especially in the ways you can customize Strapi...,
- ...which might result in a longer learning curve for developers
Photo by Sasha Kaunas on Unsplash
That said, I think you should at least consider using Strapi if you're looking for some CMS options.
Sources
- Strapi documentation,
- Strapi user stories,
- Strapi Enterprise,
- Strapi Cloud,
- My experience working with Strapi as a backend developer