This is a repository that holds the source code of all React on Chain components that are published to the main near
account.
When the main
branch is updated, all components are automatically published to the near
account under the Social DB component_alpha
namespace.
You can view your RoC component in production by visiting https://roc.near.dev/{accountId}/{componentName}
. EG: https://roc.near.dev/near/RocTest
NOTE: These components are currently NOT visible on our NEAR Discovery gateway: https://near.org
1. Make sure you have the latest version of bos-loader installed.
2. Clone the components project and get it up and running locally:
cd ~/wherever
git git@github.com:near/near-roc-components.git
cd near-roc-components
pnpm i
pnpm dev
This will kick off a bos-loader command to serve components locally for the official near
account.
3. Clone the RoC gateway project and get it up and running locally (if you already have the repo cloned, please make sure you git pull
the latest from main
):
cd ~/wherever
git clone git@github.com:near/react-on-chain.git
cd react-on-chain
pnpm i
Then we need to run the dev:components
to start up the gateway server and hot reload server:
SOURCE_PATH=near-roc-components/src pnpm dev:components
This should result in your local gateway running at http://localhost:3000
and the hot reload server running at ws://localhost:4000
.
NOTE: You'll probably see a TypeScript error in the build log for wallet-selector-control
, but you can safely ignore this. Look at this PR for more context if you're curious.
4. Open up the local gateway in your browser: localhost:3000
. In the bottom right of your screen, click on the Dev Tools
tab to expand the drawer. Click on the Flags
tab and enter the bos-loader URL
value that was output earlier from bos-loader
- which should be: http://localhost:3030
. Also, enter the Hot Reload URL
value - which should be: ws://localhost:4000
. Finally, click Save URL
on both inputs.
5. You can now view local components under the near
account. EG: http://localhost:3000/near/RocTest
6. Open up the near-roc-components
project folder in your favorite IDE. Try making a visible change to src/RocTest.tsx
and you should instantly see the new changes in your browser without having to reload the page!
7. If you're using VS Code, we highly recommend installing the community CSS Modules extension for class name autocompletion and go-to definition when clicking on a class name.
8. Check out the source code of src/RocTest.tsx
and src/RocChildTest.tsx
to get an example of the boilerplate that should be used when creating a new component. For further documentation, please refer to the Official RoC Docs.
If you're having trouble getting dev:components
to run inside of the react-on-chain
folder, please check out the Hot Reload Troubleshooting section.
If you're seeing an EADDRINUSE: address already in use
error, you can try quitting all node
processes and attempt running the dev
and dev:components
commands again:
killall node
TODO