Feature (build-*): Local development server. Closes ckeditor#10043.

Helps improve productivity with live reload via webpack-dev-server.
Useful for developing plugins, doing customizations, etc.
Starts the server by running `yarn start` inside a build package's directory.

Affects ckeditor5-build-* packages:
- ckeditor5-build-balloon
- ckeditor5-build-balloon-block
- ckeditor5-build-classic
- ckeditor5-build-decoupled-document
- ckeditor5-build-inline

docs/builds/guides/development/custom-builds.md

@@ -163,6 +163,16 @@ yarn run build
 
 You can validate whether your new build works by opening the `sample/index.html` file in a browser (via HTTP, not as a local file). Make sure to **clear the cache**.
 
+#### Starting the local development server
+
+To make development easier, you may optionally start a local development server by executing the following command:
+
+```bash
+yarn run start
+```
+
+This will start `webpack-dev-server` with source watching and live reloading (available at `http://localhost:8080/` by default).
+
 ## Updating the build
 
 You may decide to update your build at any time. Since it is a fork of the official build, you can simply merge the changes that happened meanwhile in that build, using Git commands:

packages/ckeditor5-build-balloon-block/package.json

@@ -57,7 +57,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -73,6 +74,7 @@
     "directory": "packages/ckeditor5-build-balloon-block"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }

packages/ckeditor5-build-balloon-block/sample/index.html

@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor">balloon block editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	BalloonEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {

packages/ckeditor5-build-balloon-block/webpack.config.js

@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true

packages/ckeditor5-build-balloon/package.json

@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-balloon"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }

packages/ckeditor5-build-balloon/sample/index.html

@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor">balloon editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	BalloonEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {

packages/ckeditor5-build-balloon/webpack.config.js

@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true

packages/ckeditor5-build-classic/package.json

@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-classic"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }

packages/ckeditor5-build-classic/sample/index.html

@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	ClassicEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {

packages/ckeditor5-build-classic/webpack.config.js

@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true

packages/ckeditor5-build-decoupled-document/package.json

@@ -58,7 +58,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -74,6 +75,7 @@
     "directory": "packages/ckeditor5-build-decoupled-document"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }

packages/ckeditor5-build-decoupled-document/sample/index.html

@@ -48,12 +48,12 @@ <h2>The editable</h2>
 	}
 </style>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	const editorData = `<h2>Sample</h2>
 		<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor">document editor build</a>.</p>
 		<figure class="image">
-			<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+			<img src="/manual/sample.jpg" alt="Autumn fields" />
 		</figure>
 		<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>`;
 

packages/ckeditor5-build-decoupled-document/webpack.config.js

@@ -13,6 +13,8 @@ const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
+
 module.exports = {
 	devtool: 'source-map',
 	performance: { hints: false },
@@ -29,6 +31,17 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		compress: true,
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' )
+		],
+		open: true,
+		publicPath: '/assets/',
+		watchContentBase: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {
@@ -45,12 +58,18 @@ module.exports = {
 	},
 
 	plugins: [
-		new CKEditorWebpackPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
+		// Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory`
+		// See https://github.com/ckeditor/ckeditor5/issues/700 for more information.
+		...( isDevServer ?
+			[] :
+			[
+				new CKEditorWebpackPlugin( {
+					// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+					// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+					language: 'en',
+					additionalLanguages: 'all'
+				} )
+			] ),
 		new webpack.BannerPlugin( {
 			banner: bundler.getLicenseBanner(),
 			raw: true

packages/ckeditor5-build-inline/package.json

@@ -56,7 +56,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.2",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -72,6 +73,7 @@
     "directory": "packages/ckeditor5-build-inline"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "preversion": "npm run build"
   }

packages/ckeditor5-build-inline/sample/index.html

@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#inline-editor">inline editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	InlineEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {