B2BStore Boilerplate Adapter

Table of Contents

• 📢 What is B2BStore Boilerplate Adapter?
• ⭐ Features
• 💻 Usage in B2BStore
• 📖 Publish to npmjs.com
• 📅 Update your adapter
• 🙌🏼 How to contribute

📢 What is B2BStore Boilerplate Adapter?

This repository serves as a starting point for creating adapters for the B2BStore project. The adapters abstract the connection layer of the storefront and allow for connecting to different backends.

This boilerplate includes a strong base architecture, and the necessary code to develop the library with the B2BStore project and publish to npmjs.com, while following best practices for the technologies used.

⭐ Features

 Base architecture of the adapters

The boilerplate provides a solid base architecture for creating adapters for the B2BStore storefront. This includes the necessary files and folders to organize your code, as well as a starting point for the implementation of the adapter.

 Expected interfaces in the responses

The boilerplate includes the expected interfaces that the adapter should implement in order to communicate with the B2BStore project. These interfaces provide a clear and consistent way for the adapter to communicate with the storefront, making it easier to integrate and test.

 Configuration of ESlint, Prettier and Husky

The boilerplate has a pre-configured setup for linting and formatting your code using ESlint, Prettier and Husky. This helps to ensure that your code follows best practices and is easy to read and maintain.

 Usage of the library in the B2BStore project

The "develop" branch of the repository includes the code needed to develop and test the adapter in the B2BStore project. This includes the necessary commands and configuration to run the adapter in the storefront.

 Upload the library to npmjs.com

The "main" branch of the repository includes the code necessary to upload the adapter library to npmjs.com (package.json and vite.config.js). This allows you to share and distribute your adapter with other developers easily.

💻 Usage in B2BStore

The b2bstore-boilerplate-adapter library provides a powerful and flexible adapter for the B2BStore project. This section will explain how to add the library to your B2BStore project and how to use it.

 Add the submodule

To add the b2bstore-boilerplate-adapter repository to B2BStore, use git submodules to add the library as a submodule in the app/packages/adapters folder. This can be done by running the following commands in your project's root directory:

git submodule add -b develop <adapter_repository> app/packages/adapters/<adapter_name>

 Install submodules

Once the submodule is added to your project, you will need to download it by running the following command in your project's root directory. This command will download the latest version of the submodules and make it available for use in your project.

git submodule update --init --recursive

 Using the library

Warning! If you have added the module as above, you should already be in the "develop" branch, so you can skip to the next step.

The b2bstore-boilerplate-adapter repository is designed to be used with the "develop" branch with B2BStore. To start working with the adapter, switch to the "develop" branch by running the following command in your adapter's root directory:

git checkout develop

Once you are on the "develop" branch, you can start using the adapter by calling it with the package.json name indicated. For example, in your code, you can import the library using the following syntax:

import * as boilerplate from '@b2bstore/boilerplate-adapter';

You can also import specific modules or classes from the library like this:

import { getProducts } from '@b2bstore/boilerplate-adapter';

📖 Publish to npmjs.com

Publishing the adapter to npmjs.com is a great way to make it readily available for others to use and contribute to. In this section, we will cover the steps to log in to your npmjs.com account, initialize your package with a scope, and publish it to the npm registry.

 Go to the "main" branch and update it

First, make sure that you are on the "main" branch of your repository. If you are not, you can switch to it by running the following command:

git checkout main

Later, you will need to update the "main" branch with the latest changes from the "develop" branch. To do this, run the following commands:

git merge develop

Warning! Pay attention to not overwrite the package.json file with the changes from the "develop" branch. If you do, you won't be able to publish your package to npmjs.com.

 Logging in

To log in to your npmjs.com account, open a terminal and run the following command. You will be prompted to enter your username, password, and email associated with your account. Once you have entered the correct information, you will be logged in and ready to publish your package.

npm login

 Building your package

Before you can publish your package, you will need to build it. To do this, run the following command in your adapter's root directory:

yarn; yarn build

 Publishing your package

Once your package is initialized and you are logged in to your npmjs.com account, you can publish it to the npm registry using the next command. This will make your package available for others to install and use.

npm publish

If you get an E402 error, you can add the --access public flag to the command to publish your package.

npm publish --scope @b2bstore --access public

Please note that you can only publish a package with a certain name once, so choose a name that is unique and specific to your package. If you try to publish a package with a name that is already taken, you will receive an error message.

📅 Update your adapter

It's important to note that as the B2BStore project evolves, updates to the b2bstore-boilerplate-adapter repository may be made to reflect changes in the expected interfaces and other aspects of the storefront. It's the responsibility of the developers who have forked the repository to keep their adapters up-to-date with these changes by regularly checking for updates and merging them into their own repository. To do this, you can use the following commands to update your repository with the latest changes from the b2bstore-boilerplate-adapter repository:

 Add the remote repository, and call it "upstream"

git remote add upstream https://github.com/orienteed/b2bstore-boilerplate-adapter.git

 Fetch all the branches of that remote into remote-tracking branches

git fetch upstream

 Ensure that you're on your "develop" branch and merge the "upstream/develop" branch

git checkout develop
git pull
git merge upstream/develop

 Apply the changes to the "main" branch

git checkout main
git pull
git merge develop

By staying up-to-date with these changes, you can ensure that your adapter remains compatible with the B2BStore storefront and continues to provide a seamless integration experience for your users.

🙌🏼 How to contribute

To contribute to this project, you can do it in the following ways:

• Reporting bugs.
• Suggesting enhancements.
• Opening pull requests.

If you want to know more, please contact us

---

Developed by