A junior developer’s guide to integrating Commerce.js

In 2019, global retail eCommerce sales shot to a staggering 3.5 trillion USD and are projected to almost double by 2022. At this rate, innovation and the need for progressive software for developers to leverage will continue to grow. There is certainly no slowing down the global eCommerce industry, and as a Junior Developer entering the space, it is an exciting avenue to jump into and learn.

I have recently started my journey as a Junior Frontend Developer and Designer at Commerce.js by Chec.

Commerce.js is an eCommerce SDK which communicates with Chec, a headless eCommerce platform geared towards developers, designers, and businesses. Their developer tools and platform make it easier to create custom eCommerce experiences on web, mobile, and beyond.

Being in a startup with a small core team, I have the privilege of being able to jump in on various aspects of design and development and learn from all the team members. Because building an incredible developer experience is always at the forefront of Commerce.js, I build integrations with Commerce.js and contribute with continuous improvement on the documentation, guides, and resources. Other days, I’ll design marketing assets or help to engage and define our developer community.

There is certainly no better time to enter the eCommerce industry as there is continuous innovation in the space with endless learning and growth opportunities.

In this article I’ll be introducing some basic eCommerce concepts and guiding fellow junior developers through a simple integration with Commerce.js.

To skip straight to the integration guide, go here.

What is headless eCommerce?

For a comprehensive rundown on headless eCommerce and Commerce.js, read an earlier post written by one of our founders Andrew.

The industry has shifted from a traditional eCommerce concept and unanimously opted for a better and more efficient method to building web stores. You may have heard the fairly new coined term “headless” eCommerce. What exactly does it mean to take a “headless” approach to building eCommerce solutions?

Headless eCommerce is anything but the traditional way of building a web store. Traditional platforms come packaged as robust, monolithic solutions that bind you to its ecosystem. Within this walled-environment, you are strapped to use a specific tool, platform, and technology stack.

On the other hand, “headless” figuratively means cutting off the frontend presentation layer so that you can take an autonomous approach to fetch your backend data separately and display it with the frontend language or framework of your choice. With a headless / serverless approach, the API is treated as a “first-class citizen” in this ecosystem, where the first point-of-contact your users will encounter is the API.

This is truly exciting, as for the first time, this approach takes away the abstraction and complexity of having to roll your own solution. A junior developer is able to come into a headless eCommerce project with the know-how to simply start making requests to the API backend to fetch data, and output the response with their language or framework of choice.

Ultimately, developers with no eCommerce experience can learn to create custom purchasing flows, unique brand experiences, and complete eCommerce businesses.

As a junior developer, why should you tackle a headless eCommerce project?

Being a newcomer in today’s industry can sure be overwhelming with the endless influx of information, technologies, and “best practices” to implement your projects.

When I was going through my web development program in a technical institute, my first foray into eCommerce was injecting WooCommerce as a plugin onto a WordPress website. I remember thinking there must be an easier and more intuitive way of handling eCommerce functionalities.

Within the first week at Commerce.js, I was able to try my hand at building a basic single page eCommerce app using the Commerce.js SDK. This project was built with a product catalogue, a cart and checkout feature, all done without writing any backend code. I was able to strictly stay in the frontend space by designing a simple storefront UI and then developing it.

From this project alone, I learned about the concepts of API, how to use a SDK to fetch your data, JAMstack project architecture, asynchronous programming, and application state management.

With monolithic or roll-your-own solutions, a whole backend and frontend team would be needed. However with a headless approach, building an eCommerce project has become a one-person job.

Here are some reasons why I think junior developers should learn to build headless eCommerce projects:

1. Understanding the JAMstack

• Learn how to build a JAMstack project, a modern project architecture to progressively handle data. JAMstack stands for JavaScript, APIs and Markdown.

2. Build on various touch points

• Integrate wherever your audience is. For example, create a Progressive Web Application (PWA) project, a browser-based app that mimics a native app.

3. Learn a new framework

• Learn today’s most popular frameworks, React.js or Vue.js by integrating it with Commerce.js.

4. Real world experience

• Build a real eCommerce project for a friend or for yourself. You can then add this project to your portfolio and show them a live and custom eCommerce website.

5. Flex your skills

• Developing a headless eCommerce project demonstrates you understand the fundamentals of modern web applications and frontend architecture. Make it as detailed or vanilla as you want!

Let’s build our first eCommerce project with Commerce.js!

All it takes to start your first Commerce.js integration are a few key steps.

Prerequisites

This project assumes you have some knowledge of the below concepts before starting:

• Some basic knowledge of JavaScript
• Some knowledge of JavaScript frameworks
• An idea of the JAMstack architecture and how APIs work

What you will need to start this project

• An IDE or code editor
• NodeJS, at least v8/10
• npm or yarn

Frontend and Backend tools

Because the frontend presentation layer is completely decoupled from the backend logic, you are free to choose your modern frontend tool or other backend systems to integrate with:

• Modern frontend frameworks: VueJS, ReactJS, or Angular
• Static site generators like GatsbyJS or Gridsome
• CMS: Contentful, Cosmic.js, NetlifyCMS
• PIM — Product Information Management for product marketing data

Getting started

Sign up for your Chec account

• To start building your eCommerce storefront, we first need to get you up and running with a Chec Dashboard account.

Upload your products

• In order to build an eCommerce website, you need some data to work with like products and product details. So once you've set up your account, let's log in and start uploading our products!

Set up your project on the command line

If you prefer to use a command line interface for your Chec project, manage your backend, or scaffold an example demo store, we have a Chec CLI to rapidly help with the setup. The Chec CLI can be globally installed via npm, and will provide the chec command in your terminal.

To install the Chec CLI, run the below commands:

    $ npm install -g @chec/cli
    $ chec COMMAND
    running command...
    $ chec (-v|--version|version)
    @chec/cli/1.0.0 darwin-x64 node-v10.16.3
    $ chec --help [COMMAND]
    USAGE
      $ chec COMMAND
    ...

After installation, you now have all these commands at your disposal for swift development and management of your Chec project:

• chec demo-store [STORE] [TARGETDIRECTORY]
• chec help [COMMAND]
• chec log LOGID
• chec login
• chec logout
• chec logs
• chec register
• chec request METHOD RESOURCE [PAYLOAD]
• chec whoami

To read up more on the usage of these commands, go here or check out this guide written by one of our engineers!

Project setup

After you have chosen your frontend application language or framework, and have it set up in your local environment, we will now go ahead and install Commerce.js.

Inject the Commerce.js logic layer

After setting up your project environment, lets inject the Commerce.js logic. We need to install the Commerce.js SDK to communicate with the Chec API and fetch data from the backend.

npm install @chec/commerce.js

Now we need to link up our Chec store to our project. To do so, we need to create a new Commerce instance and pass in our public API key (grab your public key from your Chec dashboard).

// Import Commerce.js as a dependency
import Commerce from '@chec/commerce.js';

// Initialize store with public key and store key in variable
// Commerce also accepts a second argument 'true', enabling the Commerce.js console debugger

const commerce = new Commerce('ENTER YOUR PUBLIC KEY HERE', true);

Make requests to fetch data from Chec

Commerce.js was built with all the frontend functionalities you would need to build a complete eCommerce store. All you need to do is make requests to various Chec API endpoints, receive successful responses, then you have your raw data to output beautifully onto your web store.

For instance, you may want to retrieve and list all your products in your product catalogue page. From your commerce object, you can access your products like so:

commerce.products.list().then((result) => {
   console.log(result.data.map(product => product.name));
});

The response you get from the request above will console log your product data.

These are what we have accomplished here so far:

• Chec store set up
• Installed Commerce.js SDK to communicate with the Chec API
• Created a new Commerce instance and passed in your public API key to connect to your Chec store
• Made a request to commerce product object property to list out your product data.

The whole idea of an API-first eCommerce platform is to make asynchronous calls to data when needed. Through your whole application, you will be making requests to endpoints to handle the full eCommerce logical flow.

Next steps would be to:

• Parse out your data and populate your product catalogue view with the product media, metadata, variants, options, conditionals, and prices.
• Fetch your cart by using the retrieve method on your cart object commerce.cart.retrieve()
• Add products to your cart with the commerce.cart.add method.
• Create a checkout token with commerce.cart.generateToken and capture your checkout with commerce.checkout.capture.

For the full guide on building an eCommerce product catalogue, check out this guide. If you would like a more comprehensive tutorial on building the full checkout process, have a go at this tutorial!

As a Junior Developer coming from a design background, I’ve been delighted with how simple Commerce.js is to use. Entering frontend development can seem mind-boggling with endless tools and not enough guidance on how best to use them. Commerce.js is truly a developer tool that is working hard to eliminate pain points for developers, with the mission make custom eCommerce development more approachable for developers, freelancers and businesses.