From d91c1787a33f325c029faf6108eec8331d84900f Mon Sep 17 00:00:00 2001 From: JoshuaLai <9044372+JoshuaLai@users.noreply.github.com> Date: Wed, 6 Aug 2025 17:14:01 -0400 Subject: [PATCH 1/2] Update the steps to use webpack --- .../quickstarts/chat/includes/chat-js.md | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/articles/communication-services/quickstarts/chat/includes/chat-js.md b/articles/communication-services/quickstarts/chat/includes/chat-js.md index 386f8fee73c5a..dea32a2f4da8d 100644 --- a/articles/communication-services/quickstarts/chat/includes/chat-js.md +++ b/articles/communication-services/quickstarts/chat/includes/chat-js.md @@ -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

Azure Communication Services

Chat Quickstart

- + ``` @@ -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! From 0e8a292f80800e3abe9589c5bf1a1353b9385bb7 Mon Sep 17 00:00:00 2001 From: JoshuaLai <9044372+JoshuaLai@users.noreply.github.com> Date: Wed, 6 Aug 2025 17:59:25 -0400 Subject: [PATCH 2/2] Update author --- .../quickstarts/chat/includes/chat-js.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/communication-services/quickstarts/chat/includes/chat-js.md b/articles/communication-services/quickstarts/chat/includes/chat-js.md index dea32a2f4da8d..44fb4338e8c53 100644 --- 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