# Creating an editor bundle in Node.js
This article presents examples of a CKEditor 5 [editor bundle](../../guides/collaboration/editor-bundle.md) in Node.js. An editor bundle is required by CKEditor Cloud Services to enable the [document storage](../../guides/collaboration/document-storage.md), [import and export](../../guides/collaboration/import-and-export.md) as well as [connection optimization](../../guides/collaboration/connection-optimization.md) features.
> **Note**
>
> This article presents ready-to-use examples. If you need a step-by-step guide or have an existing CKEditor 5 setup that needs to be adjusted to create a bundle, refer to [Advanced editor bundling](advanced-editor-bundle-nodejs.md) article.
## Example bundle
The following example presents a minimalistic editor bundle setup. It is based on 3 files - `package.json`, `ckeditorcs.js` and `webpack.config.js`, and is ready to use.
### Dependencies
This example uses the following dependencies:
* `ckeditor5`
* `ckeditor5-premium-features`
* `webpack`
* `webpack-cli`
* `mini-css-extract-plugin`
With the above, the `package.json` file should look like the one below.
```json
{
"name": "ckeditorcs-bundle",
"version": "1.0.0",
"private": true,
"dependencies": {
"ckeditor5": "^42.0.0",
"ckeditor5-premium-features": "^42.0.0"
},
"devDependencies": {
"webpack": "^5.91.0",
"webpack-cli": "^4.10.0",
"mini-css-extract-plugin": "^2.9.0"
}
}
```
### Editor build configuration
The `ckeditorcs.js` file presents an example of an editor build configuration. It is used by the bundler as an entry file.
> **Warning**
>
> Remember to adapt the configurations below to your needs because this example is kept to a minimum. Refer to the [Configuring features](../../../../ckeditor5/latest/getting-started/setup/configuration.md) documentation of CKEditor 5 to adjust the editor to your requirements.
```js
import {
// The editor base creator to use.
ClassicEditor,
// All plugins that you would like to use in your editor.
Essentials,
Paragraph,
Bold,
Italic
} from 'ckeditor5';
import {
// All premium plugins that you would like to use in your editor.
RealTimeCollaborativeEditing
} from 'ckeditor5-premium-features';
class CKEditorCS extends ClassicEditor {}
// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
Essentials,
Paragraph,
Bold,
Italic,
RealTimeCollaborativeEditing
];
// Export your editor.
export default CKEditorCS;
```
### Bundler configuration
The `webpack.config.js` file presents the bundler configuration. Here [webpack](https://webpack.js.org/) is used as the bundler.
```js
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
entry: './ckeditorcs.js', // Your editor build configuration.
output: {
filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!
libraryTarget: 'umd',
libraryExport: 'default',
clean: true
},
plugins: [
new MiniCssExtractPlugin()
],
module: {
parser: {
javascript: {
dynamicImportMode: 'eager'
}
},
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
performance: { hints: false }
};
```
### Generating the bundle
Run the following commands inside the folder with these files:
```bash
npm install
npx webpack --mode production
```
This command will result in the generation of the `./dist/editor.bundle.js` file. This is the bundle file which then should be [uploaded to CKEditor Cloud Services server](../../guides/collaboration/editor-bundle.md#uploading-the-editor-bundle).
## Example bundle (legacy configuration)
> **Warning**
>
> This section relates to bundling editor from [legacy configuration](../../../../ckeditor5/latest/updating/nim-migration/migration-to-new-installation-methods.md#legacy-installation-methods). Legacy configuration is the one using editor presets, DLLs, or `@ckeditor/ckeditor5-*` imports.
>
> Refer to the above [Example bundle](#example-bundle) section for and up-to-date example.
The following example presents a minimalistic editor bundle setup. It is based on 3 files - `package.json`, `ckeditorcs.js` and `webpack.config.js`, and is ready to use.
### Dependencies
This example uses the following dependencies:
* `@ckeditor/ckeditor5-editor-classic`
* `@ckeditor/ckeditor5-basic-styles`
* `@ckeditor/ckeditor5-essentials`
* `@ckeditor/ckeditor5-paragraph`
* `@ckeditor/ckeditor5-real-time-collaboration`
* `@ckeditor/ckeditor5-dev-utils`
* `@ckeditor/ckeditor5-theme-lark`
* `css-loader`
* `postcss-loader`
* `raw-loader`
* `style-loader`
* `webpack`
* `webpack-cli`
With the above, the `package.json` file should look like the one below:
> **Warning**
>
> A list of packages and their versions will vary, depending on the editor preset/build and the time when it was created.
```json
{
"name": "ckeditorcs-bundle",
"version": "1.0.0",
"private": true,
"dependencies": {
"@ckeditor/ckeditor5-editor-classic": "41.4.2",
"@ckeditor/ckeditor5-basic-styles": "41.4.2",
"@ckeditor/ckeditor5-essentials": "41.4.2",
"@ckeditor/ckeditor5-paragraph": "41.4.2",
"@ckeditor/ckeditor5-real-time-collaboration": "41.4.2"
},
"devDependencies": {
"@ckeditor/ckeditor5-dev-utils": "^40.2.2",
"@ckeditor/ckeditor5-theme-lark": "41.4.2",
"css-loader": "^5.2.7",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"webpack": "^5.91.0",
"webpack-cli": "^4.10.0"
}
}
```
### Editor build configuration
The `ckeditorcs.js` file presents an example of an editor build configuration. It is used by the bundler as an entry file.
> **Warning**
>
> Remember to adapt the configurations below to your needs because the examples are kept to a minimum. Refer to the [CKEditor 5 Getting started](../../../../ckeditor5/latest/getting-started/installation/cloud/quick-start.md) guide.
```js
// The editor base creator to use.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
// All plugins that you would like to use in your editor.
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
class CKEditorCS extends ClassicEditor {}
// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
Essentials,
Paragraph,
Bold,
Italic,
RealTimeCollaborativeEditing
];
// Export your editor.
export default CKEditorCS;
```
### Bundler configuration
The `webpack.config.js` file presents an example of the bundler configuration. Here [webpack](https://webpack.js.org/) is used as the bundler.
```js
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
entry: './ckeditorcs.js', // Your editor build configuration.
output: {
filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!
libraryTarget: 'umd',
libraryExport: 'default'
},
module: {
parser: {
javascript: {
dynamicImportMode: 'eager'
}
},
rules: [
{
test: /\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
},
performance: { hints: false }
};
```
### Generating the bundle
Run the following commands inside the CKEditor 5 package folder:
```bash
npm install
npx webpack --mode production
```
This command will result in the generation of the `./dist/editor.bundle.js` file. This is the bundle file which then should be [uploaded to CKEditor Cloud Services server](../../guides/collaboration/editor-bundle.md#uploading-the-editor-bundle).
---
Full index of the Cloud Services documentation: [llms.txt](../../../llms.txt)