# Webpack

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

```bash
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](https://github.com/ckbox-io/ckbox-examples/tree/main/webpack).

<a id="prepare-entry-point-file">

### 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:

```ts
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'
});
```

<a id="prepare-template-html-file">

### Prepare template HTML file

Place the following snippet inside the html template file:

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

<a id="configure-webpack">

### 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.

```javascript
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](../configuration/configuration-options.md) that will help you configure the component.

> **Note**
>
> Need more functionality? [Take a survey](https://surveys.hotjar.com/1d72aefc-0073-416d-9e70-b773458881b4) and help us develop CKBox to suit your needs better!

---

Full index of the CKBox documentation: [llms.txt](../../../llms.txt)