Skip to content

Setup and Overview

Prepare

In this walktrough we will build a frontend using the framework @codecoupler/cc-ui.

As in the walkthrough before, please make sure that you have installed the following extensions in your Visual Code environment:

Start your project in a new folder and create a folder named walkthrough-gui (later on we will create folders for api and setup).

Setup

You can now open the folder walkthrough-gui in Visual Code, or add this folder to the workspace created in the walkthrough before. Open a terminal and initialize the project with:

1
2
3
4
npm init @codecoupler/cc-webpack
git init
npm i
npm i @codecoupler/cc-ui

Minimum Required Version for this Walkthrough

@codecoupler/cc-ui: 3.0.0

Put now the following configuration in webpack.externals.js:

webpack.externals.js

1
2
3
4
5
6
7
module.exports = [
  {
    module: "@codecoupler/cc-ui",
    global: "cc",
    entries: ["dist/cc-ui.css", "dist/cc-ui.js"],
  },
];

Please start now watching your changes with npm start. This will start a browser and all modifications in your code will reload the page automatically.

From now on all the files from this walkthrough will be created in the src folder. Therefore, this is not mentioned again and again.

System

Everything starts by initializing a container as a CodeCoupler System. Let's start with:

  • Our main entry point index.js. For an easy start CodeCoupler provides a stage component named Sidebar which we will use also here. The Sidebar read all available applications from the system and display icons of every one.
  • A file in which all applications will be defined named apps.js. As the application definition array can get very long and in many cases need to be dynamically defined, you will understand later that this is a good choice.
  • Basic styling file style.css. All base colors will be defined here.
  • Styling file sidebar.css. A file to style the Sidebar. You can read details about styling the Sidebar in the documentation

src/style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
:root {
  /* Main Primary color */
  --color-primary-0: #566349;
  --color-primary-1: #454a41;
  --color-primary-2: #4d5646;
  --color-primary-3: #5e734b;
  --color-primary-4: #65844a;

  /* Main Secondary color (1) */
  --color-secondary-1-0: #373f49;
  --color-secondary-1-1: #303336;
  --color-secondary-1-2: #34393f;
  --color-secondary-1-3: #394654;
  --color-secondary-1-4: #394c60;

  /* Main Secondary color (2) */
  --color-secondary-2-0: #6f6b52;
  --color-secondary-2-1: #535149;
  --color-secondary-2-2: #605e4e;
  --color-secondary-2-3: #807a54;
  --color-secondary-2-4: #938a53;

  /* Main Complement color */
  --color-complement-0: #634951;
  --color-complement-1: #4a4143;
  --color-complement-2: #55454a;
  --color-complement-3: #724a57;
  --color-complement-4: #83495c;
}

src/sidebar.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.cc-sidebar {
  & .logo img {
    width: 40px;
    height: 40px;
    margin: 10px;
  }
  & .cc-sidebar-nav {
    background-color: var(--color-primary-2);
  }
  & .cc-sidebar-flyout {
    & .header {
      background-color: var(--color-primary-0);
      color: white;
    }
    & .body {
      background-color: var(--color-primary-1);
      & a {
        color: white;
      }
    }
  }
}
.cc-sidebar-tooltip {
  & .tooltip-inner {
    background-color: var(--color-primary-2);
  }
  & .arrow::before {
    border-right-color: var(--color-primary-2);
  }
}

src/apps.js

1
2
3
export default function() {
  return [];
}

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { System, ComponentInitError, Sidebar } from "@codecoupler/cc-ui";
import apps from "./apps";
import "./style.css";
import "./sidebar.css";
let systemStart = {
  container: document.body,
  id: "my-system",
  apps: apps,
  stages: [
    {
      stage: Sidebar,
      options: {
        logo: "logo.png"
      }
    }
  ]
};
new System(systemStart).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;
    }
  });
Back to top