Skip to content

CodeCoupler UI Setup

We recommend to start a project with the CodeCoupler Webpack Environment but it is not mandatory. Please read the setup instruction here: Packages > CodeCoupler Webpack > Setup

After that install the CodeCoupler UI Package:

1
npm i @codecoupler/cc-ui

And add an externals 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 you can put your sourcefiles into the src folder and start writing your code. npm start will start a browser and all modifications in your code will reload the page automatically. With npm run build you get your application build in the dist folder.

Standalone Setup

To install only CodeCoupler UI:

1
npm i @codecoupler/cc-ui

If you do not use the CodeCoupler Webpack Environment and you use Webpack as build environment, we recomment to install at least the CodeCoupler Webpack Externals Plugin. This will build your application with externalized libraries which do not lead to a very very big output file. You can of course configure the webpack externals by yourself, but this method is much simpler:

1
npm i @codecoupler/cc-webpack-externals-plugin -D

Add to your Webpack configuration:

1
2
3
4
const ccWebpackExternalsPlugin = require("@codecoupler/cc-webpack-externals-plugin");
module.exports = {
  plugins: [new ccWebpackExternalsPlugin(options)],
};

Add Externals 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"],
  },
];