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

# 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',
    ...
};