{"id":25902364,"url":"https://github.com/dapplets/dapplet-template","last_synced_at":"2026-03-10T05:30:59.925Z","repository":{"id":41853229,"uuid":"236743684","full_name":"dapplets/dapplet-template","owner":"dapplets","description":"The template of a Dapplet Module","archived":false,"fork":false,"pushed_at":"2024-01-09T21:33:37.000Z","size":22265,"stargazers_count":3,"open_issues_count":4,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T19:07:47.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dapplets.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-01-28T13:39:49.000Z","updated_at":"2022-11-03T01:07:10.000Z","dependencies_parsed_at":"2023-12-29T00:25:04.499Z","dependency_job_id":"31b3b070-0ac8-4319-8053-d7ac3a44bedc","html_url":"https://github.com/dapplets/dapplet-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/dapplets/dapplet-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapplets%2Fdapplet-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapplets%2Fdapplet-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapplets%2Fdapplet-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapplets%2Fdapplet-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dapplets","download_url":"https://codeload.github.com/dapplets/dapplet-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapplets%2Fdapplet-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30326055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-03-03T03:15:58.109Z","updated_at":"2026-03-10T05:30:59.796Z","avatar_url":"https://github.com/dapplets.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![dapplet-template](/docs/dark_1.png#gh-dark-mode-only)\n![dapplet-template](/docs/light_1.png#gh-light-mode-only)\n\n# Run Your Dapplet\n\nTo run a basic dapplet, follow these steps.\n\n#### 1. Choose the environment to start the project. There are three ways:\n\n1. Run the dapplet using **Gitpod**. It is the easiest way to launch **the remotely located dapplet** into the web-browser and try to work with it:\n\n[![Open in Gitpod!](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/dapplets/dapplet-template)\n\nGitpod can provide fully initialized, perfectly set-up developer environments for any kind of software project. More about Gitpod you can find on its [official website](https://www.gitpod.io/).\n\n2. [Create Dapplet App](https://www.npmjs.com/package/create-dapplet-app) is the best way to start building your own dapplet. To create **a local project**, run:\n\n```bash\nnpx create-dapplet-app\n```\n\nThis method is currently the most advanced and allows you to flexibly configure your project. You can immediately select the type of project, add an adapter, overlay or server to the dapplet.\n\n3. You can use this repo as a template for **your GitHub repository**. Use the button on the project page:\n\n![Use Template button](https://user-images.githubusercontent.com/79759758/191844612-9615bf33-b93d-4a63-b8db-7a1749fcb3af.png)\n\n#### 2. Change the module name from \"dapplet-template.dapplet-base.eth\" to your own one in the `package.json` file.\n\n#### 3. Fill in the fields in the following manifests: `package.json` and `dapplet.json`.\n\nIn `package.json` set the name, version, description, author and license for your dapp.\nThe name is the ID of your dapplet so it must be unique.\nIn `dapplet.json` set the title.\nThis second manifest is required to deploy the dapplet and add it to the dapplet registry.\nYou can find more information about the dapplet manifest [here](https://docs.dapplets.org/docs/manifest).\n\n#### 4. Change the icons to your own ones in the `src/icons` folder.\n\nThe icon `src/dapplet-icon.png` is used for the injected button in source code `src/index.ts` and for display in the Dapplets store. The link to this icon is defined in the `dapplet.json` manifest.\n\n#### 5. Edit the necessary Dapplet settings in the `config/schema.json` file.\n\nThe default setting values are defined in the `config/default.json` file.\nThe schema follows the rules defined in http://json-schema.org/.\nThe Dapplet settings UI is generated by [react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/).\n\nThere are three environments:\n\n- `dev` - used when a module is loaded from the development server;\n- `test` - used when a module is loaded from the Test Dapplet Registry;\n- `prod` - used when a module is loaded from the Production Dapplet Registry;\n\nMore about [Dapplet Config](https://docs.dapplets.org/docs/config).\n\n#### 6. You can use another Adapter in your Dapplet.\n\nDependencies are defined in the `dependencies` section of the `dapplet.json` file and are injected in the dapplet's `index.ts` file.\n\nThe Twitter adapter is used by default.\n\nHere is our list of adapters available at the moment:\n\n- [twitter-config.dapplet-base.eth](https://github.com/dapplets/modules-monorepo/tree/main/packages/adapters/twitter-config) - site-specific adapter for [Twitter](https://twitter.com);\n- [github-config.dapplet-base.eth](https://github.com/dapplets/modules-monorepo/tree/develop/packages/adapters/github-config) - site-specific adapter for [GitHub](https://github.com);\n- [social-virtual-config.dapplet-base.eth](https://github.com/dapplets/modules-monorepo/tree/develop/packages/adapters/social-virtual-config) - virtual adapter (interface) for social networks, which is an abstract of two adapters above.\n\nMore about Twitter Adapter you can find [here](https://docs.dapplets.org/docs/adapters-docs-list).\n\n#### 7. Fill in the `contextIds` section of the `dapplet.json` file.\n\n`ContextId` is an identifier of a context to which your module is bound. This is usually the same as the name of an adapter you are using. It may be:\n\n- the name of an adapter you depend on (e.g. `twitter-config.dapplet-base.eth`);\n- the domain name of a website that your dapplet will run on (e.g. `twitter.com`);\n- the identifier of a dynamic context (e.g. `twitter.com/1346093004537425927`).\n\n#### 8. Specify the argument of @Inject decorator with the chosen adapter in the `/src/index.ts` module and add the `activate()` method with a simple dapplet code.\n\n```js\nimport {} from '@dapplets/dapplet-extension'\nimport EXAMPLE_IMG from './icons/dapplet-icon.png'\n\n@Injectable\nexport default class TwitterFeature {\n  @Inject('twitter-config.dapplet-base.eth')\n  public adapter\n\n  activate() {\n    const { button } = this.adapter.exports\n    this.adapter.attachConfig({\n      POST: () =\u003e\n        button({\n          DEFAULT: {\n            label: 'Injected Button',\n            img: EXAMPLE_IMG,\n            exec: () =\u003e Core.alert('Hello, World!')\n          }\n        })\n    })\n  }\n}\n```\n\n#### 9. Install dependencies and run the code:\n\n```bash\nnpm i\nnpm start\n```\n\nYou will see a message like this:\n\n```bash\nrollup v2.38.3\nbundles src/index.ts → lib\\index.js...\nCurrent registry address: http://localhost:3001/dapplet.json\ncreated lib\\index.js in 783ms\n[2021-02-01 13:58:36] waiting for changes...\n```\n\nIn this example we use a Rollup bundler to compile modules but you can use whatever you want. Webpack for example.\n\nThe address [http://localhost:3001/dapplet.json](http://localhost:3001/dapplet.json) is a link to your dapplet manifest file. Copy it to a clipboard.\n\n#### 10. Connect the development server to the Dapplets Extension.\n\nPaste the URL to the Developer tab of the Dapplet Extension's popup and click **Add**.\n\n![Developer tab of Extension](https://github.com/dapplets/dapplet-template/assets/43613968/7ddf8291-d223-41f2-be9b-a05f5a5e4b8f)\n\n\n\u003e If an error occurs, look [here](https://docs.dapplets.org/docs/publishing).\n\nYou will see your module in the list of development modules. Here you can start the deployment process.\n\n![Developer tab of Extension](https://github.com/dapplets/dapplet-template/assets/43613968/b9a6a46d-1e0d-421b-909e-ff873ed53e29)\n\n#### 11. Run your dapplet on the website.\n\n![Developer tab of Extension](https://github.com/dapplets/dapplet-template/assets/43613968/7bdca926-c4d5-4984-97c0-100e2d062054)\n\nThis article is in the [documentation](https://docs.dapplets.org/docs/get-started)\n\n![video](https://github.com/dapplets/dapplet-docs/blob/master/static/video/get_start.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdapplets%2Fdapplet-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdapplets%2Fdapplet-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdapplets%2Fdapplet-template/lists"}