🧞♂️Build Your First DapDap Component
Building Your First DapDap Component with NEAR JS
Follow our step-by-step DapDap Developer guide, ensuring a smooth development journey from ideation to deployment. This section guides you through developing, testing, and deploying your very own DapDap components, using NEAR (BOS) CLI tools.
Why Develop on DapDap?
Developing on DapDap offers an unparalleled opportunity to contribute to an ecosystem that simplifies and enriches the DeFi experience on Ethereum . Your components will play a crucial role in enhancing the accessibility and functionality of DeFi services, benefiting a wide range of users across the Web3 landscape.
Development flow
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.
(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.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
.It'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://near.org/flags, and set the loader URL to
http://127.0.0.1:3030
.Open
https://near.org/<youraccount.near>/widget/<component name>
(case sensitive)If 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.You can work on multiple components at once by embedding them in a wrapper component.
Make changes to the component's code.
You 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:Set up a GitHub actions deployment workflow. Check this document for instructions.
You should now be able to see your DapDap component in NEAR discovery. First step is done, congrats!
Last updated