Skip to content

Commit 738a834

Browse files
Openblocks-docsgitbook-bot
Openblocks-docs
authored andcommitted
GITBOOK-106: update doc: Self-hosting
1 parent 076a934 commit 738a834

14 files changed

+123
-62
lines changed
217 KB
Loading

‎docs/build-apps/event-handlers.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
In Openblocks, event handlers are responsible for collecting and processing events from components and queries, and executing subsequent actions. For example, for a **Button** component, you can add an event handler to trigger the **Run query** action **** in response to the button **Click** event.
44

5-
<figure><img src="../.gitbook/assets/image (8) (1).png" alt=""><figcaption></figcaption></figure>
5+
<figure><img src="../.gitbook/assets/image (19).png" alt=""><figcaption></figcaption></figure>
66

77
Set event handlers wisely to provide a reactive and responsive user experience (UX). For example, triggering a **get-all** query after **insert-new-data** query finishes enables table automatically refresh.
88

@@ -32,7 +32,7 @@ Running a query can result in success or failure, so queries have two events: **
3232

3333
There are a number of event handler actions available in Openblocks for handling different scenarios. Set them in the **Action** dropdown list in an event handler.
3434

35-
![](<../.gitbook/assets/image (9) (1).png>)
35+
![](<../.gitbook/assets/image (1) (1).png>)
3636

3737
{% hint style="info" %}
3838
See [advanced](event-handlers.md#advanced) on this page to know advanced settings.
@@ -48,7 +48,7 @@ Trigger the selected query.
4848

4949
To control a component, select a component in the **Component** dropdown list and call one of its methods in the **Method** dropdown list.
5050

51-
![](<../.gitbook/assets/image (29).png>)
51+
![](<../.gitbook/assets/image (17).png>)
5252

5353
### Set temporary state
5454

‎docs/build-apps/module.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ When building an app, you want to reuse components and queries across different
44

55
<figure><img src="../.gitbook/assets/module-1.png" alt=""><figcaption><p>Build a <a href="module.md#demo-a-statistics-module">statistics module</a></p></figcaption></figure>
66

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

99
## Module basics
1010

@@ -67,7 +67,7 @@ Module inputs are parameters passed to the module from external apps. The suppor
6767

6868
This section guides you through the steps to build a statistics module and reuse it in an app. &#x20;
6969

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

7272
1. Create module inputs:
7373

@@ -86,7 +86,7 @@ This section guides you through the steps to build a statistics module and reuse
8686
<figure><img src="../.gitbook/assets/module-17.png" alt=""><figcaption></figcaption></figure>
8787
5. Reuse the module multiple times by passing different input values.&#x20;
8888

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

9191
#### Input Test
9292

‎docs/build-apps/use-third-party-libraries.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,19 @@ https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js
7070

7171
Navigate to the left sidebar, click <img src="../.gitbook/assets/image (1).png" alt="" data-size="line"> > **Other** > **Scripts and style** > **Add a library**. Then paste the **cowsay** link here.
7272

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

7575
Now you can write code in **JS query** to test its usage with `cowsay.say`:
7676

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

7979
or in component **Properties**:
8080

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

8383
And since you have set up cowsay just for **Openblocks's new application 1,** you can not use cowsay in another app.
8484

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

8787
### Import on Workspace-level
8888

‎docs/data-sources/connect-to-databases/google-sheets.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Navigate back to to [Google Sheets](https://docs.google.com/spreadsheets), and f
3737
1. Open the JSON file of the key.
3838
2. Copy the value of `client_email`, which is an identity used for access management of your sheet.
3939

40-
<figure><img src="../../.gitbook/assets/Google-sheets-key-client-email.jpeg" alt=""><figcaption></figcaption></figure>
40+
<figure><img src="../../.gitbook/assets/Google-sheets-key-client-email (1).jpeg" alt=""><figcaption></figcaption></figure>
4141
3. Click **Share** at the top right and paste the copied `client_email` value to add a member with access.
4242

4343
<figure><img src="../../.gitbook/assets/Google-sheets-share.jpg" alt=""><figcaption></figcaption></figure>

‎docs/data-sources/data-source-basics.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Follow the steps below:
1515
1. Click **Data Sources** on Openblocks homepage.
1616
2. Click **New data source** on the upper right. This permission is restricted to workspace admins and developers.
1717

18-
<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
18+
<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
1919
3. Select the database or API type you need to connect.&#x20;
2020

2121
<figure><img src="../.gitbook/assets/data source basics-2.png" alt=""><figcaption></figcaption></figure>

‎docs/queries/query-basics.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Queries support you to read data from or write data to your data sources. You ca
66

77
You can connect to a data source that was already in your data source library or create a new one. For detailed information, see [data-source-basics.md](../data-sources/data-source-basics.md "mention").
88

9-
<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
9+
<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
1010

1111
## Create a query
1212

‎docs/self-hosting/README.md

+110-49
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
---
2-
description: Host Openblocks on your own device using Docker or Docker-Compose.
3-
---
4-
51
# Self-hosting
62

7-
## Prerequisites
3+
In this article, you will be guided through hosting Openblocks on your own server using Docker-Compose or Docker.
4+
5+
For easy setup and deployment, we provide an [all-in-one image](https://hub.docker.com/r/openblocksdev/openblocks-ce) which bundles frontend, backend and data persistence services altogether in one single container.&#x20;
6+
7+
Also, for developers in need of stateless containers in cluster environment, we provide [separate images](https://hub.docker.com/u/openblocksdev) of backend and frontend services with a customizable Dockerfile.
8+
9+
## All-in-one image: all services in one container <a href="#all-in-one" id="all-in-one"></a>
10+
11+
### Prerequisites
812

913
* [Docker](https://docs.docker.com/get-docker/) (version 20.10.7 or above)
1014
* [Docker-Compose](https://docs.docker.com/compose/install/) (version 1.29.2 or above)
@@ -17,12 +21,12 @@ Windows users are recommended to use PowerShell for running commands below.
1721

1822
In your working directory, run the following commands to make a directory named `openblocks` to store the data of Openblocks:
1923

20-
```powershell
24+
```bash
2125
mkdir openblocks
2226
cd openblocks
2327
```
2428

25-
## Deploy
29+
### Deploy
2630

2731
{% tabs %}
2832
{% tab title="Docker-Compose (Recommend)" %}
@@ -57,10 +61,12 @@ Follow the steps below:
5761

5862

5963

60-
When you see `frontend`, `backend`, `redis`, and `mongo` `entered the RUNNING state`, the Openblocks service has officially started:\
61-
64+
When you see `frontend`, `backend`, `redis`, and `mongo` `entered the RUNNING state`, the Openblocks service has officially started:&#x20;
6265

6366
<figure><img src="../.gitbook/assets/check-logs-ce.png" alt=""><figcaption></figcaption></figure>
67+
4. Visit [**http://localhost:3000**](http://localhost:3000) and click **Sign up**. Openblocks will automatically create a workspace for you, then you can start building your apps and invite members to your workspace.
68+
69+
<figure><img src="../.gitbook/assets/after-deployment.png" alt=""><figcaption></figcaption></figure>
6470
{% endtab %}
6571

6672
{% tab title="Docker" %}
@@ -74,16 +80,97 @@ docker run -d --name openblocks -p 3000:3000 -v "$PWD/stacks:/openblocks-stacks"
7480
{% endtab %}
7581
{% endtabs %}
7682

77-
## Customize deployment configurations
83+
### Update
84+
85+
{% tabs %}
86+
{% tab title="Docker-Compose" %}
87+
Run the following commands to update to the latest Openblocks image:
88+
89+
```bash
90+
docker-compose pull
91+
docker-compose rm -fsv openblocks
92+
docker-compose up -d
93+
```
94+
{% endtab %}
95+
96+
{% tab title="Docker" %}
97+
Run the following commands to update to the latest Openblocks image:
98+
99+
{% code overflow="wrap" %}
100+
```bash
101+
docker pull openblocksdev/openblocks-ce
102+
docker rm -fv openblocks
103+
docker run -d --name openblocks -p 3000:3000 -v "$PWD/stacks:/openblocks-stacks" openblocksdev/openblocks-ce
104+
```
105+
{% endcode %}
106+
{% endtab %}
107+
{% endtabs %}
108+
109+
## Separate images: services in different containers <a href="#multi" id="multi"></a>
110+
111+
For developers who require stateless containers in a cluster environment, we offer separate images of backend and frontend service with a customizable Dockerfile. A well-functioning Openblocks deployment consists of below services:
112+
113+
* **api-service**: Backend service.
114+
* **node-service**: Backend service.
115+
* **frontend**: Frontend service.
116+
* **MongoDB**: Used for persisting data of users, apps, data sources, etc.
117+
* **Redis**: Used for maintaining user sessions, rate limiter, etc.
118+
119+
### Prerequisites
120+
121+
* [Docker-Compose](https://docs.docker.com/compose/install/) (version 1.29.2 or above)
122+
123+
### Deploy
124+
125+
1. In your working directory, run the following commands to make a directory named `openblocks` to store the data of Openblocks:
126+
127+
```bash
128+
mkdir openblocks
129+
cd openblocks
130+
```
131+
2. Download the configuration file by clicking [docker-compose-multi.yml](https://cdn-files.openblocks.dev/docker-compose-multi.yml) or running the curl command:
132+
133+
<pre class="language-bash" data-overflow="wrap"><code class="lang-bash"><strong>curl https://cdn-files.openblocks.dev/docker-compose-multi.yml -o $PWD/docker-compose-multi.yml
134+
</strong></code></pre>
135+
3. Modify service configurations in the downloaded Dockerfile according to your needs:
136+
137+
<figure><img src="../.gitbook/assets/docker-compose-multi.jpeg" alt=""><figcaption></figcaption></figure>
138+
139+
* **mongodb**: Start a new MongoDB instance on your host. You can delete this part and modify the environment variable `MONGODB_URI` of **openblocks-api-service** to use your own MongoDB.
140+
* **redis**: Start a new Redis instance on your host. You can delete this part and modify the environment variable `REDIS_URI` of **openblocks-api-service** to use your own Redis.
141+
* **openblocks-api-service**: Required.&#x20;
142+
* **openblocks-node-service**: Required.
143+
* **openblocks-frontend**: Required. Can be optional if you deploy frontend on CDN.
144+
4. Start Docker containers by running this command:
145+
146+
```bash
147+
docker-compose -f docker-compose-multi.yml up -d
148+
```
149+
5. Visit [**http://localhost:3000**](http://localhost:3000) and click **Sign up**. Openblocks will automatically create a workspace for you, then you can start building your apps and invite members to your workspace.
150+
151+
<figure><img src="../.gitbook/assets/after-deployment.png" alt=""><figcaption></figcaption></figure>
152+
153+
### Update
154+
155+
Run the following commands to update services to the latest:
156+
157+
```bash
158+
docker-compose pull
159+
docker-compose up -d
160+
```
161+
162+
## Customize configurations
163+
164+
This section shows how to customize deployment configurations by setting environment variables.&#x20;
78165

79-
This section shows how to customize deployment configurations. If you have already started a container, you need to restart the container for the new configurations to take effect. Following are the ways to **restart** your container:
166+
If you have already started Docker containers, you need to restart the containers for new configurations to take effect. For example, the way to **restart** your container running an all-in-one image is:
80167

81168
{% tabs %}
82169
{% tab title="Docker-Compose (Recommend)" %}
83170
One single command:
84171

85-
```
86-
docker-compose up
172+
```bash
173+
docker-compose up -d
87174
```
88175

89176
It picks up configuration changes by stopping containers already in service and recreating new ones.
@@ -92,14 +179,20 @@ It picks up configuration changes by stopping containers already in service and
92179
{% tab title="Docker" %}
93180
Run the following commands to stop, remove the container already in service, and start up a new one using the newly customized deployment command.
94181

95-
```docker
182+
```bash
96183
docker stop openblocks
97184
docker rm openblocks
98185
# run your new docker run command
99186
```
100187
{% endtab %}
101188
{% endtabs %}
102189

190+
Below are examples of configuring all-in-one image by setting environment variables in `docker-compose.yml`. If you are self-hosting with separate images, modify `openblocks-api-service` part of `docker-compose-multi.yml` instead.&#x20;
191+
192+
{% hint style="info" %}
193+
For more information about configurations and environment variables, see [Configuration](https://github.com/openblocks-dev/openblocks/tree/develop/deploy/docker#all-in-one-image).
194+
{% endhint %}
195+
103196
### Use your own MongoDB and Redis
104197

105198
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.
@@ -114,7 +207,7 @@ Add environment variables `MONGODB_URI` and `REDIS_URI` in `docker-compose.yml`
114207
Add environment variables `MONGODB_URI` and `REDIS_URI` to the deployment command, as shown below:
115208

116209
{% code overflow="wrap" %}
117-
```docker
210+
```bash
118211
docker run -d --name openblocks -e MONGODB_URI=YOUR_MONGODB_URI REDIS_URI=YOUR_REDIS_URI -p 3000:3000 -v "$PWD/stacks:/openblocks-stacks openblocksdev/openblocks-ce
119212
```
120213
{% endcode %}
@@ -135,7 +228,7 @@ Add an environment variable `LOCAL_USER_ID` in `docker-compose.yml` downloaded i
135228
Add an environment variable `LOCAL_USER_ID` to the deployment command, as shown below:
136229
137230
{% code overflow="wrap" %}
138-
```docker
231+
```bash
139232
docker run -d --name openblocks -e LOCAL_USER_ID=10010 -p 3000:3000 -v "$PWD/stacks:/openblocks-stacks" openblocksdev/openblocks-ce
140233
```
141234
{% endcode %}
@@ -158,7 +251,7 @@ With an SSL certificate, you can securely visit self-hosted Openblocks with HTTP
158251
2. Change the `ports` in the deployment command to `3443:3443`, as shown below:
159252
160253
{% code overflow="wrap" %}
161-
```docker
254+
```bash
162255
docker run -d --name openblocks -p 3443:3443 -v "$PWD/stacks:/openblocks-stacks" openblocksdev/openblocks-ce
163256
```
164257
{% endcode %}
@@ -170,35 +263,3 @@ In cases where you have certificates with names: `server.crt` and `server.key`,
170263
`server.crt` => `fullchain.pem`\
171264
`server.key` => `privkey.pem`
172265
{% endhint %}
173-
174-
## Update
175-
176-
{% tabs %}
177-
{% tab title="Docker-Compose" %}
178-
Run the following commands to update to the latest Openblocks image:
179-
180-
```docker
181-
docker-compose pull
182-
docker-compose rm -fsv openblocks
183-
docker-compose up -d
184-
```
185-
{% endtab %}
186-
187-
{% tab title="Docker" %}
188-
Run the following commands to update to the latest Openblocks image:
189-
190-
{% code overflow="wrap" %}
191-
```docker
192-
docker pull openblocksdev/openblocks-ce
193-
docker rm -fv openblocks
194-
docker run -d --name openblocks -p 3000:3000 -v "$PWD/stacks:/openblocks-stacks" openblocksdev/openblocks-ce
195-
```
196-
{% endcode %}
197-
{% endtab %}
198-
{% endtabs %}
199-
200-
## Sign up
201-
202-
Visit **http://localhost:3000** and click **Sign up**. Openblocks will automatically create a workspace for you, then you can start building your apps and invite members to your workspace.
203-
204-
<figure><img src="../.gitbook/assets/after-deployment.png" alt=""><figcaption></figcaption></figure>

0 commit comments

Comments
 (0)