Skip to content

CMS developer overview

Before getting started

In this concept article, you will find an overview of the CMS, exploring its fundamental concepts and key features. If you haven't already, we highly recommend reading it. Additionally, review our versioning strategy to understand how releases are managed. You may also find it useful to read about our approach to software development at Bizzkit.

Setting up a test environment

To understand how the CMS and Bizzkit plugins work together, you should set up a test environment. The Bizzkit CMS starter kit provides a pre-configured environment, including all necessary plugins and examples of components. You can start by cloning the repository from GitHub. The repository contains a Vite project based on React. Here’s a step-by-step guide to help you get started:

Getting up and running without a Builder.io account

If you'd like to run the project without a Builder.io account and without connecting to a specific Bizzkit environment, you can use the Bizzkit Academy environment. This environment contains products, SKUs, and product images related to a fictional merchandising store.

Follow these steps:

  1. Ensure you have Node.js installed on your machine. If not, download it from https://nodejs.org/en/.
  2. Clone the repository from https://github.com/bizzkit-commerce/cms-starter-kit.
  3. Run npm ci to install the necessary dependencies.
  4. Update the .env file with the following variables:
    • VITE_BUILDER_API_KEY=b2bf7d87fba24d018748fa4ed166b00a
    • VITE_DAM_URL=https://cdne-academy2-stage-imaging-spdquced46luc.azureedge.net/
    • VITE_SEARCH_URL=https://academy2-ecs-search.bizzkit.biz/
  5. Run npm start to start the development server.
  6. Open your browser and navigate to http://localhost:5173.

You should now see the front page of the Bizzkit CMS starter kit running in your browser, displaying images, videos, and products using the example components.

Using your own Builder.io account and Bizzkit environment

If you have a Builder.io account and want to connect to a specific Bizzkit environment, follow these steps:

  1. Follow the steps above to clone the repository and install the necessary dependencies.
  2. Update the .env file:
    • Change VITE_BUILDER_API_KEY to your own Builder.io API key.
    • Change VITE_DAM_URL. You can retrieve it by calling GET /api/_/settings/cdn in your DAM API instance or from the settings in the DAM UI.
    • Change VITE_SEARCH_URL to the URL of your Bizzkit Ecommerce Search Host API.
  3. Configure Builder.io to use the website address above for designing and previewing content.
  4. Set up the required models in Builder.io:
    • Page model named Page with the following fields:
      • title (Text)
      • description (Long text)
      • keywords (Text)
      • noIndex (Boolean)
      • noFollow (Boolean)
      • openGraphTitle (Text)
      • openGraphDescription (Text)
    • Section model named Header without any fields.
    • Data model named Usp with the following fields:
      • Items (List)
        • Label (Text)
        • Link (URL)
  5. Add content to your models:
    • Add a simple header section to the Header model.
    • Add a few USP to the Usp model.
    • Create a new page based on the Page model.

Once everything is set up, navigate to http://localhost:5173. You should see the front page of the Bizzkit CMS starter kit running in your browser, showing an empty page with a header and some USP. You can now start designing your pages using the Builder.io editor.