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
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',
...
};
See the list of the supported configuration options that will help you configure the component.
Need more functionality? Take a survey and help us develop CKBox to suit your needs better!