Skip to main content

Self Hosted

Instalation​

To use the self-hosted version, a few additional steps are required. Follow these instructions:

Requirements​

  • node >= 16
  • npm >= 7

1. Clone the repository​

Clone the repository from the official source to your local environment.

git clone git@github.com:EasyBrizy/Brizy-Local-Editor.git

2. Install dependencies​

Navigate to the project root directory and run the following command to install the required dependencies:

npm install

3. Build the core​

After the dependencies are installed, Inside packages/core build the core files using the build command:

# Build core
# npm run build:prod -- --env PUBLIC_HOST=`host where the build will be hosted`

# Example on S3
npm run build:prod -- --env PUBLIC_HOST=https://s3.amazonaws.com/${AWS_BUCKET}/build

4. Publish the script​

Once the build process is complete, publish the generated script by uploading it to your cloud storage (e.g., AWS S3) or any other hosting service. Ensure the script is accessible via a URL for integration into your project.

AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY} AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY} aws s3 cp build s3://${AWS_BUCKET}/build --recursive

Video Tutorial​

For a more detailed explanation, you can watch the video here:

Usage​

Below is an example of how to integrate the editor into your page using the CDN, showing the necessary HTML structure.

<!-- Builder Container-->
<div id="editor" style="height: 85vh; width: 100vw"></div>

<!-- Update button-->
<button id="update">Update</button>

<!-- Self-hosted S3 version-->
<script src="https://s3.amazonaws.com/${AWS_BUCKET}/build/index.js"></script>

<script>
  // Config Example: https://github.com/EasyBrizy/Brizy-Local/blob/story/packages/demo/public/index.html
  const config = {...};
  const editor = document.querySelector("#editor");
  const update = document.querySelector("#update");

  const Builder = window.Builder;
  let builderAPI;

  // This demo token will limit the output to a pre determined HTML and let you test the Editor before deciding on a commercial license.
  // To unlock all functionality and reseller the editor to your clients, you'll need an unique token generated by us.
  // Contact us: https://www.brizy.io/brizylocal#lets-talk
  const token = "demo";

  Builder.init(token, config, (api) => {
    builderAPI = api;
  });

  update.addEventListener("click", () => {
    builderAPI.save();
  });
</script>

API Interface​

The API interface exposes methods for saving and compiling actions. Below are the details of the methods available:

Methods​

save(cb?: OnSave) => void​

The save method triggers the save functionality within the Builder. During this process, the Builder checks the initial data and compares it with any changes. If modifications are detected, the Builder compiles only the changed data, which could include ProjectData or PageData. Optionally, you can pass a callback function to handle custom behavior after the save operation completes.

Parameters:

  • cb? (optional): A callback function of type OnSave to execute after the save operation.

Example Usage:

builderAPI.save(() => {
  console.log("Save operation completed!");
});

compile(cb?: OnCompile) => void​

The compile method initiates a forced compile process within the Builder. Unlike the save method, the compile method bypasses checks for changes and compiles all data, including both ProjectData and PageData. Optionally, you can pass a callback function to handle custom behavior after the compile operation finishes.

Parameters:

  • cb? (optional): A callback function of type OnCompile to execute after the compile operation.

Example Usage:

builderAPI.compile(() => {
  console.log("Compile operation completed!");
});

Initialization and Usage​

To use the API methods, the Builder must first be initialized with a token, configuration, and a callback to set the API instance.

Initialization​

Builder.init(token, config, (api) => {
  builderAPI = api;
});
  • token: A string representing the authentication token.
  • config: Configuration options for the Builder.
  • api: The callback parameter, which is an instance of the API interface.

Event Listener Example​

Once initialized, you can use the builderAPI instance to invoke methods. For instance, attaching a save operation to a button click event:

update.addEventListener("click", () => {
  builderAPI.save();
});

In this example, clicking the update button triggers the save method.