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​
-
(Optional) Download and install
bos
CLI.infoYou 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. -
To get component code saved on the BOS, use
bos
to download the source code. Otherwise, create asrc
folder. -
Create a component within that src folder like
src/<component name>.jsx
.tipIt's common practice to use
.
delimited component names for namespacing. You can handle this with folders for better files organization.For example,
AppName.Component
→AppName/Component.jsx
. -
Download and install BOS Component Loader (
bos-loader
). -
Run
bos-loader <youraccount.near> --path src
(or run fromsrc
folder) -
Open https://dev.near.org/flags, and set the loader URL to
http://127.0.0.1:3030
. -
Open
https://dev.near.org/<youraccount.near>/widget/<component name>
(case sensitive)infoIf you're testing on
testnet
, use your testnet account and open https://test.near.org instead.Run
bos-loader <youraccount.testnet> --path src
locally, set loader URL in https://test.near.org/flags and openhttps://test.near.org/<youraccount.testnet>/widget/<component name>
to view your component locally.tipYou can work on multiple components at once by embedding them in a wrapper component.
-
Make changes to the component's code.
infoYou must refresh the browser's web page to see the changes.
-
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 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!