BOS Loader

(🫰 94 nL)
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.

    ::info
    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.

    ::tip
    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 https://near.org/flags, and set the loader URL to http://127.0.0.1:3030.

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

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

    ::
  8. Make changes to the component’s code.

    ::info
    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!

Scroll to Top