Skip to content

Update the steps to use webpack #127478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update the steps to use webpack #127478

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d91c178
Update the steps to use webpack
JoshuaLai Aug 6, 2025
0e8a292
Update author
JoshuaLai Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 27 additions & 7 deletions articles/communication-services/quickstarts/chat/includes/chat-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
```
Expand Down Expand Up @@ -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!
Expand Down