From 22fa60b09b7aef52baa78fc2d0436e6096111759 Mon Sep 17 00:00:00 2001
From: Nitin Kumar <snitin315@gmail.com>
Date: Wed, 22 Sep 2021 15:00:36 +0530
Subject: [PATCH] docs: add `startCallback` example (#3864)

---
 examples/api/start-callback/README.md         | 31 +++++++++++++++++++
 examples/api/start-callback/app.js            |  6 ++++
 examples/api/start-callback/server.js         | 13 ++++++++
 examples/api/start-callback/webpack.config.js | 16 ++++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 examples/api/start-callback/README.md
 create mode 100644 examples/api/start-callback/app.js
 create mode 100644 examples/api/start-callback/server.js
 create mode 100644 examples/api/start-callback/webpack.config.js

diff --git a/examples/api/start-callback/README.md b/examples/api/start-callback/README.md
new file mode 100644
index 0000000000..e4ae4f7e43
--- /dev/null
+++ b/examples/api/start-callback/README.md
@@ -0,0 +1,31 @@
+# API: startCallback(callback)
+
+While it's recommended to run `webpack-dev-server` via the CLI, you may also choose to start a server via the API.
+
+This example demonstrates using `startCallback(callback)` method. It instructs `webpack-dev-server` instance to start the server and then run the callback function.
+
+```js
+const Webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const webpackConfig = require("./webpack.config");
+
+const compiler = Webpack(webpackConfig);
+const devServerOptions = { ...webpackConfig.devServer };
+const server = new WebpackDevServer(devServerOptions, compiler);
+
+server.startCallback(() => {
+  console.log("Successfully started server on http://localhost:8080");
+});
+```
+
+Use the following command to run this example:
+
+```console
+node server.js
+```
+
+## What Should Happen
+
+1. Open `http://localhost:8080/` in your preferred browser.
+2. You should see the text on the page itself change to read `Success!`.
+3. You should see `Successfully started server on http://localhost:8080` in the terminal output.
diff --git a/examples/api/start-callback/app.js b/examples/api/start-callback/app.js
new file mode 100644
index 0000000000..51cf4a396b
--- /dev/null
+++ b/examples/api/start-callback/app.js
@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";
diff --git a/examples/api/start-callback/server.js b/examples/api/start-callback/server.js
new file mode 100644
index 0000000000..116ef47ad5
--- /dev/null
+++ b/examples/api/start-callback/server.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const Webpack = require("webpack");
+const WebpackDevServer = require("../../../lib/Server");
+const webpackConfig = require("./webpack.config");
+
+const compiler = Webpack(webpackConfig);
+const devServerOptions = { ...webpackConfig.devServer, open: true };
+const server = new WebpackDevServer(devServerOptions, compiler);
+
+server.startCallback(() => {
+  console.log("Successfully started server on http://localhost:8080");
+});
diff --git a/examples/api/start-callback/webpack.config.js b/examples/api/start-callback/webpack.config.js
new file mode 100644
index 0000000000..74e736ae9a
--- /dev/null
+++ b/examples/api/start-callback/webpack.config.js
@@ -0,0 +1,16 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  output: {
+    filename: "bundle.js",
+  },
+  stats: {
+    colors: true,
+  },
+});