System

Everything starts by initializing a container as a CodeCoupler System. Let's start with putting this into a file named system.js file in the src folder:

src/system.js

import { System } from "@codecoupler/cc-ui";
export default class extends System {}

Now we will import our System and initialize it in the index.js file:

src/index.js

import System from "./system";
new System().initialized
  .then((system) => {
    console.info("System is Ready!", system.id);
  });

You should now see the message `System is Ready!" in the console with a random id. Let's add a error handler at this point. So we will see what is going wrong in case of an error in the next steps:

src/index.js

import System from "./system";
import { ComponentInitError } from "@codecoupler/cc-ui";
new System().initialized
  .then((system) => {
    console.info("System is Ready!", system.id);
  })
  .catch((e) => {
    if (e instanceof ComponentInitError) {
      console.error(e);
      if (e.component.blocked !== "error")
        e.component.env.$element.html("Oops, Something went wrong!");
    } else {
      throw e;
    }
  });