https://github.com/dapplets/dapplet-template
The template of a Dapplet Module
https://github.com/dapplets/dapplet-template
Last synced: 11 months ago
JSON representation
The template of a Dapplet Module
- Host: GitHub
- URL: https://github.com/dapplets/dapplet-template
- Owner: dapplets
- License: mit
- Created: 2020-01-28T13:39:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T21:33:37.000Z (about 2 years ago)
- Last Synced: 2024-04-15T13:44:15.659Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 21.2 MB
- Stars: 3
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Run Your Dapplet
To run a basic dapplet, follow these steps.
#### 1. Choose the environment to start the project. There are three ways:
1. 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:
[](https://gitpod.io/#https://github.com/dapplets/dapplet-template)
Gitpod 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/).
2. [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:
```bash
npx create-dapplet-app
```
This 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.
3. You can use this repo as a template for **your GitHub repository**. Use the button on the project page:
#### 2. Change the module name from "dapplet-template.dapplet-base.eth" to your own one in the `package.json` file.
#### 3. Fill in the fields in the following manifests: `package.json` and `dapplet.json`.
In `package.json` set the name, version, description, author and license for your dapp.
The name is the ID of your dapplet so it must be unique.
In `dapplet.json` set the title.
This second manifest is required to deploy the dapplet and add it to the dapplet registry.
You can find more information about the dapplet manifest [here](https://docs.dapplets.org/docs/manifest).
#### 4. Change the icons to your own ones in the `src/icons` folder.
The 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.
#### 5. Edit the necessary Dapplet settings in the `config/schema.json` file.
The default setting values are defined in the `config/default.json` file.
The schema follows the rules defined in http://json-schema.org/.
The Dapplet settings UI is generated by [react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/).
There are three environments:
- `dev` - used when a module is loaded from the development server;
- `test` - used when a module is loaded from the Test Dapplet Registry;
- `prod` - used when a module is loaded from the Production Dapplet Registry;
More about [Dapplet Config](https://docs.dapplets.org/docs/config).
#### 6. You can use another Adapter in your Dapplet.
Dependencies are defined in the `dependencies` section of the `dapplet.json` file and are injected in the dapplet's `index.ts` file.
The Twitter adapter is used by default.
Here is our list of adapters available at the moment:
- [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);
- [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);
- [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.
More about Twitter Adapter you can find [here](https://docs.dapplets.org/docs/adapters-docs-list).
#### 7. Fill in the `contextIds` section of the `dapplet.json` file.
`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:
- the name of an adapter you depend on (e.g. `twitter-config.dapplet-base.eth`);
- the domain name of a website that your dapplet will run on (e.g. `twitter.com`);
- the identifier of a dynamic context (e.g. `twitter.com/1346093004537425927`).
#### 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.
```js
import {} from '@dapplets/dapplet-extension'
import EXAMPLE_IMG from './icons/dapplet-icon.png'
@Injectable
export default class TwitterFeature {
@Inject('twitter-config.dapplet-base.eth')
public adapter
activate() {
const { button } = this.adapter.exports
this.adapter.attachConfig({
POST: () =>
button({
DEFAULT: {
label: 'Injected Button',
img: EXAMPLE_IMG,
exec: () => Core.alert('Hello, World!')
}
})
})
}
}
```
#### 9. Install dependencies and run the code:
```bash
npm i
npm start
```
You will see a message like this:
```bash
rollup v2.38.3
bundles src/index.ts → lib\index.js...
Current registry address: http://localhost:3001/dapplet.json
created lib\index.js in 783ms
[2021-02-01 13:58:36] waiting for changes...
```
In this example we use a Rollup bundler to compile modules but you can use whatever you want. Webpack for example.
The address [http://localhost:3001/dapplet.json](http://localhost:3001/dapplet.json) is a link to your dapplet manifest file. Copy it to a clipboard.
#### 10. Connect the development server to the Dapplets Extension.
Paste the URL to the Developer tab of the Dapplet Extension's popup and click **Add**.
> If an error occurs, look [here](https://docs.dapplets.org/docs/publishing).
You will see your module in the list of development modules. Here you can start the deployment process.
#### 11. Run your dapplet on the website.
This article is in the [documentation](https://docs.dapplets.org/docs/get-started)
