Skip to content

Loading Studio SDK

Step 1 - Install Studio SDK

Using bun, we can install the Studio SDK.

bun install @chili-publish/studio-sdk

Step 2 - Creating Our JavaScript File

Modify index.ts with the following code

import StudioSDK from "@chili-publish/studio-sdk";

const studio = new StudioSDK({
  editorId: "studio"
});

studio.loadEditor();
What does this code block do?

This code snippet is about initializing and loading a the editor using the Studio SDK from CHILI publish. Let's go through it step by step to understand what it's doing:

Importing the Studio SDK 

import StudioSDK from "@chili-publish/studio-sdk";
This line imports the Studio SDK from CHILI publish. StudioSDK is a class that takes a configuration file to prepare for loading of the Editor Engine.

Initializing the Studio SDK 

const studio = new StudioSDK({
  editorId: "studio"
});
Here, a new instance of the StudioSDK class is created. The constructor takes an options object as its parameter, where editorId is the id of the HTML element where the Editor Engine will be created. Essentially, you should have an HTML element with the id studio in your webpage where the editor will be loaded.

Loading the Editor 

studio.loadEditor();
This line calls the loadEditor method on the studio instance. The purpose of this method is to actually load and initialize the editor within the web page. This step typically involves setting up the editor's interface, loading any necessary resources, and making the editor ready for user interaction.

Step 3 - Bundle Our TypeScript

Because we are using packages, and TypeScript, we need to bundle our index.ts into a index.js file that contains our code and @chili-publish/studio-sdk code in one file.

To this we need to modify our server.ts file to bundle our index.ts. Bun comes with a built in bundler. Update your server.ts with the following code:

await Bun.build({
  entrypoints: ['./index.ts'],
  outdir: './',
});

// Fix bunjs bug
await Bun.write("./index.js", (await Bun.file("./index.js").text()).replace("require_main(), 1)", "require_main())"));

const server = Bun.serve({
  port: 3000,
  fetch: async (req) => {
    const fileName = new URL(req.url).pathname.split("/").filter(Boolean).pop()
    const fileResp = Bun.file(`./${fileName ?? "index.html"}`);
    if (!(await fileResp.exists())) {
      return new Response(`${fileName} not found`, { status: 404, statusText: `${fileName} not found` });
    }
    return new Response(fileResp);
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);
What does this new code snippet do?

This code snippet demonstrates how to use Bun's build and file system APIs to bundle TypeScript files and packages into JavaScript and then apply a workaround to fix a specific bug. Let's break it down:

Bun Build Process 

await Bun.build({
  entrypoints: ['./index.ts'],
  outdir: './',
});
- Bun.build(): This is an asynchronous function call that tells Bun to compile or build the project based on the provided configuration. This takes all imported packages and bundles them into one file. - entrypoints: ['./index.ts']: This specifies the entry points for the build process. Here, it's an array with a single entry, ./index.ts, indicating that the build process should start with the index.ts TypeScript file located in the root directory. - outdir: './': Specifies the output directory where the compiled files will be placed. Here, it's set to the current directory (./), meaning the compiled JavaScript files will be placed in the same location as the source TypeScript files.

Fixing a Bug in the Generated Code 

await Bun.write("./index.js", (await Bun.file("./index.js").text()).replace("require_main(), 1)", "require_main())"));
- After the build process completes, there is currently a bug in the generated index.js file. The bug is error in the code generated by Bun, specifically around the function call require_main(). Bun is still a young toolkit. - Bun.file("./index.js").text(): This reads the content of the index.js file as text. - .replace("require_main(), 1)", "require_main())"): This string manipulation is used to correct the bug by replacing require_main(), 1) with require_main()). The generated code incorrectly includes an extra , 1 in a function call, which needs to be removed for the code to work as intended. - Bun.write("./index.js", ...): Finally, the corrected code is written back to the index.js file, overwriting the buggy version with the fixed version.

Summary The overall purpose of this code is to compile TypeScript code into JavaScript using Bun, then fix a specific syntax error in the generated JavaScript file. This workaround is necessary because of a bug in the Bun build process that incorrectly formats a part of the output code, causing runtime errors about StudioSDK not being a constructor. By programmatically reading the output file, applying the fix, and writing it back, this code ensures that the final JavaScript is error-free and ready for execution.

Step 3 - 🧪 Test Studio

Test our server script by running bun server.ts and testing the page on http://localhost:3000.

You will see the words "GraFx Studio" and the loading of Editor Engine as a gray rectangle.

Then crtl + c to stop the bun process.

Step 4 - Authenticate

In this quick start guide, we are going to be using the built in Media and Font Connectors. To do that, we need to make sure the SDK has the correct base URL for the Environment API and correct token for authentication.

To do this we will use configuration.setValue and get our values from importing WellKnownConfigurationKeys.

Update your index.ts with the following JavaScript:

import StudioSDK, {WellKnownConfigurationKeys} from "@chili-publish/studio-sdk";

//Initialise SDK
const studio = new StudioSDK({
  editorId: "studio"
});

studio.loadEditor();

studio.configuration.setValue(WellKnownConfigurationKeys.GraFxStudioEnvironmentApiUrl, "ENVIRONMENT API BASE");
studio.configuration.setValue(WellKnownConfigurationKeys.GraFxStudioAuthToken, "TOKEN HERE");

Where you will need to fill in the "ENVIRONMENT API BASE" and "TOKEN HERE" with the correct values.

  • GraFxStudioEnvironmentApiUrl is expecting a URL that looks like
    https://ft-nostress.chili-publish.online/grafx/api/v1/environment/ft-nostress/
  • GraFxStudioAuthToken, expects a token that is generated from Client ID and Client Secret

Learn how to generate a token here.

Step 4 - Load A Document

In a production server, we will need to pull the document JSON from the Environment API or from your own host or database. The Editor Engine does not care where the JSON comes from, as long as it is the correct format. See Document JSON In-Depth for more details.

The document.load function allows us to pass in the JSON. For this example, we can load in a demo document for testing. Update your index.ts with the following code.

import StudioSDK, { WellKnownConfigurationKeys } from "@chili-publish/studio-sdk";

const studio = new StudioSDK({
  editorId: "studio"
});

studio.loadEditor();

studio.configuration.setValue(WellKnownConfigurationKeys.GraFxStudioEnvironmentApiUrl, "ENVIRONMENT API BASE");
studio.configuration.setValue(WellKnownConfigurationKeys.GraFxStudioAuthToken, "TOKEN HERE");

const demoDocURL = "https://studio-cdn.chiligrafx.com/editor/1.4.1/web/assets/packages/runtime_assets/assets/documents/demo.json";
const demoDoc = await (await fetch(demoDocURL)).text()
await studio.document.load(demoDoc);