The Open Source Buyer Portal
Introduction
As we’ve seen, B2B Edition configuration settings offer a degree of control over the look and feel of the Buyer Portal, and the portal exposes JavaScript utilities you can leverage in your own app code.
However, when your customization needs are more complex, you can customize the Buyer Portal application code itself.
Some common reasons for needing to customize the Buyer Portal might include:
- You need to create an additional “page” in the Buyer Portal with unique functionality.
- You have created bespoke permissions assigned to your user roles (which can be done with the REST Management API) and need to customize access control for certain features based on those permissions.
- You need to customize the B2B GraphQL queries powering the Buyer Portal and/or the data that’s displayed on existing pages.
- You need to integrate data from a separate system into the functionality of the Buyer Portal.
The Buyer Portal resides in an open source GitHub repository, making it possible to take the native application and make it your own.
Overview
We’ll be walking through the setup process for customizing the Buyer Portal in detail in coming exercises. From a high level, running your own Buyer Portal involves the following:
Setup
- Fork the repository: Create your own copy of the Buyer Portal code.
- Local installation: Install dependencies and set up configuration to run the application locally.
During Development
- Run locally: The Buyer Portal application includes a development server that will dynamically serve assets as you make changes.
- Update store configuration: Update storefront scripts to initialize the Buyer Portal from your local development server.
In Production
- Build and deploy: Build the Buyer Portal assets and deploy them to a CDN or other public storage.
- Update store configuration: Update storefront scripts to load from the deployed location.
Once your custom Buyer Portal is in production, the React application will be injected into your storefront as usual. The only difference is that instead of being initialized from the native hosted version from BigCommerce, the UI will be initialized from your own build files.
Implications of Forking
When using the native, BigCommerce-hosted Buyer Portal, your storefront is automatically kept up to date with the latest changes. When new updates of the Buyer Portal app are available, these will be automatically applied to your own store.
By contrast, an important implication of using your own custom Buyer Portal is that such updates are not automatic. As with forking any open source software, pulling in upstream changes from the main repository is your responsibility.
Keep in mind these general guidelines:
- Fork when necessary: Carefully consider if your project requirements are sufficient to take on the maintenance of a custom portal.
- Keep up to date: Regularly pull upstream changes into your fork if you want to get the benefit of new features and bug fixes. Updates become more difficult the more the source repository diverges from your fork.
- Write upgradeable code: Keep custom code as isolated as possible to minimize upgrade conflicts.
