Webpack

If you would like to use CKBox with webpack, start by installing the ckbox package along with the necessary webpack packages, and loaders.

npm i ckbox
npm i -D webpack webpack-cli css-loader style-loader ts-loader typescript html-webpack-plugin

Note

Please refer to our repo with examples for full code sample.

Prepare entry point file

Import CKBox dependency in the desired location, and add CSS styling file import required by CKBox components.
Shown below is the content of an example entry file:

import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

const app = document.querySelector<HTMLDivElement>('#app');

if (!app) {
    throw new Error('Missing #app element');
}

CKBox.mount(app, {
    dialog: true,
    tokenUrl: 'https://your.token.url'
});

Prepare template HTML file

Place the following snippet inside the html template file:

<div id="ckbox"></div>

Configure webpack

To get CKBox up and running, at first you need to instruct webpack how it should treat TypeScript files and how to transform styling css files. Use ts-loader or a similar loader to transpile TypeScript to JavaScript. Additionally, use style-loader + css-loader or similar to transform .css files.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.tsx',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'index.html'),
    })],
    mode: 'development',
    ...
};

Note

See the list of the supported configuration options that will help you configure the component.

Note

Need more functionality? Take a survey and help us develop CKBox to suit your needs better!