Skip to content

Setup

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).

Init

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 -b main
npm i
npm i @codecoupler/cc-ui

Minimum Required Version

@codecoupler/cc-ui: 2.4.5

Put now the following configuration in 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"],
  },
];

From now on all the files from this walkthrough will be created in the src folder. Therefore the prefix src will not be used.

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.

Included Libraries

Please note that with this package you will get automatically the following libraries installed. Therefore you do not need to install them again, not even to externalize them. You can use them immediately:

  • animate.css
  • bootstrap
  • bootstrap-select
  • bootstrap4-toggle
  • @fortawesome/fontawesome-free
  • imagesloaded
  • inputmask
  • jquery
  • jquery-blockui
  • jquery-contextmenu
  • js-cookie
  • kendo-ui-core
  • moment
  • moment-timezone
  • moment-transform
  • nanoid
  • perfect-scrollbar
  • rangeslider.js
  • vue
  • webfontloader

The following libraries are included as well but they will be used by supplied widgets and you should think about using the widgets instead the libraries directly:

  • fullcalendar
  • golden-layout
  • jspanel4
  • slickgrid