Merge pull request #127478 from JoshuaLai/patch-8

Court72 · web-flow · commit c601a99c6f67 · 2025-08-11T15:28:02.000-06:00
Update the steps to use webpack
diff --git a/articles/communication-services/quickstarts/chat/includes/chat-js.md b/articles/communication-services/quickstarts/chat/includes/chat-js.md
@@ -2,14 +2,14 @@
 title: include file
 description: include file
 services: azure-communication-services
-author: probableprime
+author: awang119
 manager: mikben
 ms.service: azure-communication-services
 ms.subservice: azure-communication-services
 ms.date: 06/30/2021
 ms.topic: include
 ms.custom: include file
-ms.author: rifox
+ms.author: anniewang
 ---
 
 ## Prerequisites
@@ -60,11 +60,25 @@ The `--save` option lists the library as a dependency in your **package.json** f
 
 ### Set up the app framework
 
-This article uses parcel to bundle the application assets. Run the following command to install it and list it as a development dependency in your **package.json**:
+This article uses webpack to bundle the application assets. Run the following command to install it and list it as a development dependency in your **package.json**:
 
 ```console
-npm install parcel --save-dev
+npm install webpack webpack-cli webpack-dev-server --save-dev
 ```
+
+Create a **webpack.config.js** in the root directory of your project. 
+
+```js
+module.exports = {
+    entry: "./client.js",
+    output: {
+        filename: "bundle.js"
+    },
+    devtool: "inline-source-map",
+    mode: "development"
+}
+```
+
 Create an **index.html** file in the root directory of your project. Use this file as a template to add chat capability using the Azure Communication Chat SDK for JavaScript.
 
 ```html
@@ -76,7 +90,7 @@ Create an **index.html** file in the root directory of your project. Use this fi
   <body>
     <h4>Azure Communication Services</h4>
     <h1>Chat Quickstart</h1>
-    <script src="./client.js" type="module"></script>
+    <script src="./bundle.js"></script>
   </body>
 </html>
 ```
@@ -110,12 +124,18 @@ console.log('Azure Communication Chat client created!');
 
 ### Run the code
 
+Update the `scripts` section in the **package.json** to include "start"
+```json
+"start": "webpack serve --config ./webpack.config.js"
+```
+
 Run the following command to run your application:
 ```console
-npx parcel index.html
+npm install
+npm run start
 ```
 
-Open your browser and navigate to http://localhost:1234/. In the developer tools console within your browser, you should see:
+Open your browser and navigate to http://localhost:8080/. In the developer tools console within your browser, you should see:
 
 ```console
 Azure Communication Chat client created!
