{"id":13639765,"url":"https://github.com/witfyl-ravped/urbit-react-cookbook","last_synced_at":"2025-04-20T01:32:31.653Z","repository":{"id":100191045,"uuid":"353233570","full_name":"witfyl-ravped/urbit-react-cookbook","owner":"witfyl-ravped","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-10T19:52:33.000Z","size":863,"stargazers_count":25,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-09T10:38:29.991Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/witfyl-ravped.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-03-31T05:11:13.000Z","updated_at":"2024-01-11T04:00:43.000Z","dependencies_parsed_at":"2023-03-31T13:02:22.328Z","dependency_job_id":null,"html_url":"https://github.com/witfyl-ravped/urbit-react-cookbook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witfyl-ravped%2Furbit-react-cookbook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witfyl-ravped%2Furbit-react-cookbook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witfyl-ravped%2Furbit-react-cookbook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witfyl-ravped%2Furbit-react-cookbook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/witfyl-ravped","download_url":"https://codeload.github.com/witfyl-ravped/urbit-react-cookbook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249838128,"owners_count":21332561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T01:01:04.589Z","updated_at":"2025-04-20T01:32:31.212Z","avatar_url":"https://github.com/witfyl-ravped.png","language":"TypeScript","funding_links":[],"categories":["Archive"],"sub_categories":["Tools"],"readme":"# Urbit React Cookbook\n\nIn this lesson you will learn how to build a React frontend that connects to your ship and interacts with it using the four basic forms of communication, namely: `poke`, `subscribe`, `thread`, `scry`. These examples will get you started building React apps for Urbit as well as familiarize you with the Urbit APIs required to get you writing your own custom functions.\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Getting Started\n\nFirst run `yarn install` to install project dependencies.\n\nThen boot a fake `~zod` ship connected to localhost port 8080 (alternatively you can select a different port by editing `src/App.tsx`) For instructions on booting fake ships see [this guide](https://github.com/timlucmiptev/gall-guide/blob/62f4647b614dc201796204a0214629375a1a56bb/workflow.md).\n\nThen run `yarn start` to boot the local React server which will run at `http://localhost:3000` by default.\n\nIn a separate browser tab connect to your fake `~zod`'s Landscape page which is `http://localhost:8080` or a custom port of you changed it\n\nBack at the React app, enter your ships localhost address and code in the top right corner. In this example the host will be `http://localhost:8080`. Obtain your ship's code by enter `+code` in your ship's dojo. For `~zod` the code will be `lidlut-tabwed-pillex-ridrup`. Then press \"Login.\"\n\nNow we've almost got everything setup and talking to each other. Finally enter `+cors-registry` in your ship's dojo. You will likely see two URLs in the `requests` entry:\n\n`~~http~3a.~2f.~2f.localhost~3a.3000`\nand\n`~~http~3a.~2f.~2f.localhost~3a.8080`\n\nYou'll need to add it to the approved list by running:\n\n`|cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000`\nand\u003cbr\u003e\n`|cors-approve ~~http~3a.~2f.~2f.localhost~3a.8080`\n\nVerfiy these commands worked by running `+cors-registry` again.\n\n## Logging in\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/logginging.md) for a detailed walkthrough of the login flow you performed above\n\n## Creating Groups\n\n\u003ci\u003eHow to call `threads`\u003c/i\u003e\n\nStart by adding a group using the form on the left of the React app. Enter a Group Name, Group Description and press \"Create Group.\" Your browser will confirm the successful creation with an alert window.\nAfter clicking OK in the alert window navigate to your Landscape tab to confirm that the group was created and it's tile added.\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/creatinggroups.md) for a detailed walkthrough of the Creating Groups functions and UI\n\n## Creating Channels\n\n\u003ci\u003eHow to create and maintain `subscriptions`\u003c/i\u003e\n\nBack in the React app, fill in the middle \"Create Channel\" inputs. Select your newly created group from the drop-down and enter a Chat Name and Description and press \"Create Channel\". This should also be confirmed by a window alert upon success.\n\nAfter clicking OK in the alert window navigate to your Landscape page to confirm that the channel was created within your previously created group.\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/creatingchannels.md) for a detailed walkthrough of the Creating Channels functions and UI\n\n## Sending Messages\n\n\u003ci\u003eCalling `thread`s and managing `subscriptions`\u003c/i\u003e\n\n\u003cb\u003eNOTE:\u003c/b\u003e \u003ci\u003eWe are still waiting on an update to `@urbit/http-api` that uses the new `group-update` versioning syntax. Until then the steps below will not work.\u003c/i\u003e\n\nAgain back in the React app, select a chat from the drop-down menu under \"Send Message\" and enter some text. Upon clicking the \"Send Message\" button you should once again receive a confirmation alert.\n\nYour message should now appear at the top of the React app. You can navigate back to your Landscape window to see the message you just sent from React displayed in the newly created channel.\n\nNotice that you can send a message to the channel from Landscape and that it will also appear at the top of the React app.\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/sendingmessages.md) for a detailed walkthrough of the Sending Messages functions and UI\n\n## Adding Members\n\n\u003ci\u003eHow to send a `poke`\u003c/i\u003e\n\nIn this input select a Group that you have created from the dropdown menu and enter a ship with '~' prefix. Then press \"Add Member\"\n\nConfirm that the member has been added via Group info in Landscape. You can find this information be clicking on the Group tile. Then the gear icon in the top left corner of the group. From there click on Participants and confirm the ship you added is listed\n\nTry adding a few different ships\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/addingmembers.md) for a detailed walkthrough of the Adding Members functions and UI\n\n## Removing Members\n\n\u003ci\u003eUsing `poke`s\u003c/i\u003e\n\nFirst select one of the groups you created from the \"Select a Group\" drop down in this section\n\nAfter selecting a group the list of members will auto-populate in the \"Select a Member\" dropdown. Select a member from this list\n\nNow click \"Remove Member\" and then confirm that this user was indeed removed via your Landscape interface\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/removingmembers.md) for a detailed walkthrough of the Removing Members functions and UI\n\n## Inviting Members\n\n\u003ci\u003eUsing `thread`s\u003c/i\u003e\n\nTo fully test this function we recommend booting another fake ship on your local network. Follow the instructions in the introduction to this guide for support in creating and booting fake ships. Call this second one `~mus`\n\nAfter `~mus` is running, you should see `~zod is your neighbor` displayed in its terminal. Check which port it is running on by looking for a message similar to this: `http: web interface live on http://localhost:8081` in the startup text. Use that link to log into it's Landscape interface\n\nBack in the React interface, select a group under the \"Invite Members\" heading\n\nEnter the name of your new fake ship in the input below, `~mus` in my case\n\nThen enter a message and press \"Send Invite\"\n\nAfter clicking \"Ok\" in confirmation popup, navigate to the `~mus` Landscape interface. After a few moments you should receive a notification ontop of the Leap menu in the top left corner. Click on it to accept your invite and join the group.\n\nOnce inside the group you will have access the channel(chat) you created in the previous step. Notice that you can send a message in the chat from `~mus` and it will display at the top of our React interface\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/invitingmembers.md) for a detailed walkthrough of the Inviting Members functions and UI\n\n## Removing Channels\n\n\u003ci\u003eUsing `thread`s\u003c/i\u003e\n\nTo test this function start by adding a new channel under the Create Channel heading.\n\nVerify that it has been added by checking in Landscape. You can also test it by selecting it from the \"Select a Channel\" dropdown selector under the \"Remove Channels\" header. Go ahead and select it from this menu and click \"Remove Channel.\"\n\nConfirm the pop and then verify the channel has been removed from both the drop down menus and your Landscape tab.\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/removingchannels.md) for a detailed walkthrough of the Inviting Members functions and UI\n\n## Removing Groups\n\n\u003ci\u003eUsing `thread`s\u003c/i\u003e\n\nChoose your group from \"Select a Group\" dropdown under the \"Remove Group\" header and click \"Remove Group\".\n\nClick OK and verify that the group and its tile has been removed from Landscape.\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/removinggroups.md) for a detailed walkthrough of the Inviting Members functions and UI\n\n## Scrying Messages\n\n\u003ci\u003eHow to `scry`\u003c/i\u003e\n\nThis function allows you to `scry` a variable number of recent messages from a given channel. To test this out go ahead and send a few messages to one of the channels you created. Bonus points if you send a few more from another ship that you added or invited\n\nNow select this channel from the dropdown under \"Scrying Messages\"\n\nIn the \"Count\" input enter a number of messages to scry out of `graph-store`\n\nFinally press \"Scry Messages\" and check the results in the console\n\n[Click here](https://github.com/witfyl-ravped/urbit-react-cookbook/blob/main/scryingmessages.md) for a detailed walkthrough of the Scrying Messages functions and UI\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwitfyl-ravped%2Furbit-react-cookbook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwitfyl-ravped%2Furbit-react-cookbook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwitfyl-ravped%2Furbit-react-cookbook/lists"}