Skip to content

Setup

Prepare

In this walkthrough 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
npm init @codecoupler/cc-webpack@latest
git init -b main
npm i @codecoupler/cc-ui@3.0.0-83

Required Version for this Walkthrough

The Version 3 is not ready yet. You have to install a specific prerelease version.

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.

Conventions

From now all mentioned files and folders, unless otherwise noted, will be created inside of the folder src.