* [DigitalOcean](self-hosting/digitalocean.md)

* [Develop your first plugin](build-plugins/develop-your-first-plugin.md)

<figure><img src="../.gitbook/assets/image (8) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>

When editing an app or module, select **Insert > Extensions > Modules** to display the modules that you have access to.&#x20;

<img src="../.gitbook/assets/module-10.jpeg" alt="" data-size="original">

<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/Add a library (1) (1) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/write code in JS query (1) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/or in Properties (1) (1) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/in another app (1) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/Import on Workspace-level libraries-advanced (1).png" alt=""><figcaption></figcaption></figure>

description: >-

Execute the following `yarn start` file:

yarn create openblocks-plugin my-plugin

cd my-plugin

yarn start

After executing `yarn start`, the browser is automatically opened and you enter the component development environment.

<figure><img src="../.gitbook/assets/plugin-1.jpeg" alt="Screenshot of component development environment"><figcaption></figcaption></figure>

In `openblocks` field in `package.json` file, you need to define the component properties. For example, the following is the explanation of several fields:

* `comps` defines UI components contained in the plugin. For each component, the key name of the object is the unique identity, and the value is metadata.

* `comps[someCompKey].name` defines the component name shown in the **Insert** tab.

* `comps[someCompKey].icon` defines the component icon shown on the canvas. Use a relative path to where `package.json` file is located.

* `comps[someCompKey].layoutInfo` defines the component layout:

* w: width of the component. Counted by the number of grid cells (range: 1 - 24).

* h: height of the component. Counted by the number of grid cells (range: >= 1).

"openblocks": {

"description": "",

"comps": {

"hello_world": {

"name": "Hello World",

"icon": "./icons/hello_world.png",

"layoutInfo": {

"w": 12,

"h": 5

}

},

"counter": {

"name": "Counter",

"icon": "./icons/hello_world.png"

}

}

}

To export all the components, use `src/index.ts`, for example:

import HelloWorldComp from "./HelloWorldComp";

export default {

hello_world: HelloWorldComp,

};

The default exported object `key` needs to be consistent with the `key` configured in `comps` in `package.json` file.

When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:

If you do not specify the parameter `--publish`, the `tar` file will be saved in the root folder.

In the Openblocks app, click **Insert** > **Extensions** > **Add npm plugin** in the right pane. <img src="../.gitbook/assets/plugin-2.png" alt="" data-size="original">

Input your npm package's URL or name, and then you can use your customized components.

my-plugin

https://www.npmjs.com/package/my-plugin

<figure><img src="../.gitbook/assets/plugin-3.png" alt=""><figcaption></figcaption></figure>

For code demo, refer to Openblocks [Github](https://github.com/openblocks-dev/openblocks/tree/develop/client/packages/openblocks-plugin-demo).

<figure><img src="../../.gitbook/assets/Google-sheets-key-client-email.jpeg" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>

By default Openblocks uses the built-in MongoDB and Redis installed inside the container, and you can replace them with your own MongoDB and Redis clusters.

Add environment variables `MONGODB_URI` and `REDIS_URI` in `docker-compose.yml` downloaded in your working directory.\

<img src="../.gitbook/assets/mongodb-redis-uri.png" alt="" data-size="original">

Add environment variables `MONGODB_URI` and `REDIS_URI` to the deployment command, as shown below:

You can deploy Openblocks on DigitalOcean using our [Openblocks docker image](https://marketplace.digitalocean.com/apps/openblocks) from the DigitalOcean Marketplace. Based on the pre-built image, you can create a DigitalOcean droplet as your cloud-based infrastructure and set up an Openblocks instance in seconds. [Create a DigitalOcean account](https://cloud.digitalocean.com/registrations/new) or [Log in](https://cloud.digitalocean.com/login) to get started.

1. Search **Openblocks** in DigitalOcean Marketplace or visit [Openblocks page](https://marketplace.digitalocean.com/apps/openblocks) directly.

2. Click **Create Openblocks Droplet** to enter the configuring page.

<figure><img src="../.gitbook/assets/DigitalOcean-1.png" alt=""><figcaption></figcaption></figure>

3. Choose the region and datacenter. The closest one to you and your users is recommended.

<figure><img src="../.gitbook/assets/DigitalOcean-2.png" alt=""><figcaption></figcaption></figure>

4. The Openblocks image should already be listed as shown below, so you don't need to choose here.

<figure><img src="../.gitbook/assets/DigitalOcean-3.png" alt=""><figcaption></figcaption></figure>

5. Choose a plan and size for your Droplet, which determines its RAM, disk space, and vCPUs as well as its price. Note that the **Basic** shared CPU with **Regular with SSD (1 GB CPU / 25GB SSD Disk / 1000GB transfer)** CPU option is more than capable of hosting an Openblocks instance.

<figure><img src="../.gitbook/assets/DigitalOcean-4.png" alt=""><figcaption></figcaption></figure>

6. Choose an [SSH key](https://docs.digitalocean.com/products/droplets/how-to/add-ssh-keys/) if you've added one, or create a root password for the Droplet.

<figure><img src="../.gitbook/assets/DigitalOcean-5.png" alt=""><figcaption></figcaption></figure>

7. Set the droplet name, add tags, and click **Create Droplet** to finish the deployment.

<figure><img src="../.gitbook/assets/DigitalOcean-6.png" alt=""><figcaption></figcaption></figure>

It usually takes around a minute to start the droplet.

<figure><img src="../.gitbook/assets/DigitalOcean-7.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

For more help, see [Droplets | DigitalOcean Documentation](https://docs.digitalocean.com/products/droplets/).

{% endhint %}

After deployment, your new Openblocks instance should be available at **http://your\_droplet\_public\_ipv4:3000**.

<figure><img src="../.gitbook/assets/DigitalOcean-8.png" alt=""><figcaption></figcaption></figure>

In the welcome page, Click **Sign up** to get started. Openblocks will automatically create a workspace for you. Then you can start building your apps and invite members to your workspace.

<figure><img src="../.gitbook/assets/DigitalOcean-9.png" alt=""><figcaption></figcaption></figure>

Find the deployed droplet in your [DigitalOcean projects](https://cloud.digitalocean.com/) and redirect to its details page. Click **Console** on the right to enter the Droplet Web Console.

<figure><img src="../.gitbook/assets/DigitalOcean-10.png" alt=""><figcaption></figcaption></figure>

<figure><img src="../.gitbook/assets/DigitalOcean-11.png" alt=""><figcaption></figcaption></figure>

For information about how to update the Openblocks image to the latest version, see [Update](./#update).

For information about how to customize deployment configurations, see [Customize deployment configurations](./#customize-deployment-configurations).

In Openblocks, you can organize the members of your workspace using different groups, and assign roles to groups to manage [permissions for resources](permissions-for-resources.md). You can find members and groups settings in <img src="../.gitbook/assets/members0.png" alt="" data-size="line">**Settings** on Openblocks homepage.

<figure><img src="../.gitbook/assets/members1.png" alt=""><figcaption></figcaption></figure>

In the **Members** tab, there are two pre-built groups by default: **All members** and **Developers**. You can invite members to your workspace by managing **All members** group. Open the group and click **Invite members**, then you can copy the invitation link.

<figure><img src="../.gitbook/assets/members2.gif" alt=""><figcaption></figcaption></figure>

You can also find the short cut to <img src="../.gitbook/assets/icon-members-2.png" alt="" data-size="line"> **Invite members** on the bottom left on Openblocks homepage.&#x20;

<figure><img src="../.gitbook/assets/members3.png" alt=""><figcaption></figcaption></figure>

Openblocks creates a **Developers** group by default and it cannot be deleted, and workspace admins can add members into it. The members of it can create new resources including apps, modules, navigations, folders, and data sources, and can manage query library. Workspace admins can add members to the developers group.

<figure><img src="../.gitbook/assets/members4.png" alt=""><figcaption></figcaption></figure>

In the **Members** tab, workspace admins can click **+ Create group** to add a new group. The group creator naturally works as a group admin.

<figure><img src="../.gitbook/assets/members5.png" alt=""><figcaption></figcaption></figure>

Group admins can add members into groups.