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