How to setup neardevhub-widgets locally

[Rishabhraghwendra18]

Hi Near team,
I want to setup this repo on my local to work on an issue but after cloning the foked version of it then running npm install and npm run dev I am getting this UI at http://127.0.0.1:3030:

I have already installed Near BOS from here on Linux OS.

Any solution for this?

[elliotBraem]

@Rishabhraghwendra18

It looks like a jumbled mess, but that is actually correct!
I see where this can be confusing, we will have to make our documentation clearer.

Here are the steps:

1. Run the dev command. This will run a server that broadcasts your local widgets for development via bos-loader.

npm run dev

2. With this running, either go to https://test.near.org/flags (testnet) or https://near.org/flags (mainnet).

3. On this /flags page, copy and paste your localhost address into the input and save.

http://127.0.0.1:3030

4. Now you should see a yellow banner up top that signifies that you are loading from the designated address. If you see an error, you may want to try a different browser. I use Chrome.
   

5. Your widgets are broadcasting! Do some local development in /src directory and view that widget on the gateway. Notice how the directories translate into dot-notation when accessing a widget. For example, make some changes in src/gigs-board/pages/Feed and see those updated changes at :

https://near.org/devgovgigs.near/widget/gigs-board.pages.Feed

Happy coding! Let me know if you have any issues with this, we'll move it into docs after your approval.

[Rishabhraghwendra18]

EDIT

I would like to add a few more points to @elliotBraem reply.

As per the package.json file of the repo running npm run dev starts broadcasting our widgets on Mainnet. So it's advisable to load the widgets by saving the flag on https://near.org/flags (mainnet) and the UI will load on https://near.org/devgovgigs.near/widget/gigs-board.pages.Feed (mainnet)

Remember, npm run dev broadcasts widgets on mainnet. So saving flags on testnet, https://test.near.org/flags will not work. It's better to use mainnet because it has more components than testnet. (This was the mistake I was making earlier)

I hope it will help new contributors.