BOS Loader

To Share and +4 nLEARNs

BOS Loader

In this article you’ll learn how to develop, test, and deploy BOS components using CLI tools. You can use this workflow to tap into the colaboration, pull-request, and other GitHub benefits while still deploying components to the BOS.

BOS Component Loader serves a local directory of component files as a JSON payload properly formatted to be plugged into a BOS redirectMap. When paired with a viewer configured to call out to this loader, it enables local component development.

Development flow

  1. (Optional) Download and install bos-cli.

    You need bos-cli if you have component code on the BOS already that you want to use or if you want to manage component deploys locally instead of the GitHub actions CI/CD.

  2. To get component code saved on the BOS, use bos-cli to download the source code. Otherwise, create a src folder.

  3. Create a component within that src folder like src/<component name>.jsx.

    It’s common practice to use . delimited component names for namespacing. You can handle this with folders for better files organization.

    For example, AppName.ComponentAppName/Component.jsx.
  4. Download and install BOS Component Loader (bos-loader).

  5. Run bos-loader <youraccount.near> --path src (or run from src folder)

  6. Open, and set the loader URL to

  7. Open<youraccount.near>/widget/<component name> (case sensitive)

    You can work on multiple components at once by embedding them in a wrapper component.

  8. Make changes to the component’s code.

    You must refresh the browser’s web page to see the changes.

  9. When you’re done, use the X on the banner to stop loading locally.

Component deployment

At this point, your new component is ready to be deployed. To deploy, you can use either of the following two paths:

  • Use bos-cli to deploy from command line:

    bos-cli deploy
  • Set up a GitHub actions deployment workflow. Check this document for instructions.

You should now be able to see your component in discovery. Happy Hacking!

Generate comment with AI 2 nL
Scroll to Top
🧪Name Sky Beta Test – Create and mint🏆
This is default text for notification bar
Report a bug👀