Intro to commercetools custom apps — Part 1
A quick look at how customizable the world’s leading digital commerce platform is
A brief intro to commercetools
As their website mentions, commercetools is the world’s leading digital commerce platform that allows you to create powerful, highly customized commerce experiences while building a profitable, sustainable brand.
Commercetools offers a multi-tenant, cloud-native commerce platform, providing the building blocks for the post-web era. We can use it to build innovative shopping experiences across all touchpoints: web, smartphone, POS, voice, IoT devices, AR/VR, car commerce, and many more.
Commercetools custom apps
Before talking about custom apps we need to introduce the merchant center, which is the administration application for the commercetools platform which allows you to manage every aspect of a commercetools project.
A Custom Application is a web application for the Merchant Center with the goal of extend its functionality and easily integrate custom features to fit business requirements.
Goal
Our final goal for this basic exercise is to create a commercetools custom app from scratch and then create a custom app that reflects a status workflow through which an e-commerce order passes.
Article Parts
This article is divided into two parts:
- Part1 — Hello world commercetools custom app (this article): here we build the simplest expression of a custom app.
- Part2 — Custom app for handling commercetools states: in this subject, we cover a specific scenario where custom apps can be applied and provide a real value to the business.
Hello world commercetools custom app
Before we start — Prerequisites
As established in the official documentation, we need:
- A commercetools account and a project. (we can create a free account)
- Node.js installed (version >=12, recommended >=14).
- Either yarn or npm as a package manager.
- Basic knowledge of React as well as some experience working with web applications.
Now, let’s create it:
- Create a custom app with the script provided
npx @commercetools-frontend/create-mc-app \my-new-custom-application-project \--template starter
- Configure our custom app in the /custom-applicationconfig.js file, for example, we have to check the location of the commercetools service.
- Once we have everything set up, we run our app with:
npm start
Here we have to use our commercetools credentials and finally, we get our first custom app running.
Conclusions
As we saw in this article, with a few steps we were able to create a custom app from scratch, achieving a solid starting point to integrate future developments in commercetools Merchant Center.
