🧞‍♂️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 a src 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 from src 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 open https://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:
```
bos deploy
```
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 5 months ago

Why Develop on DapDap?

Development flow

(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 a src 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 from src 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 open https://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:

bos deploy

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!