Exercise - Scaffolding a voice calling web app


In this unit, you'll create a web app and run it in the browser.

Create app folder

  1. In a console window (such as cmd, PowerShell, or Bash), use the following commands to create a new folder for our app and change into it

    mkdir VoiceCallingApp
    cd VoiceCallingApp
  2. Next we'll prepare the new folder to become a web app.

    npm init -y

This will setup, the folder for Node.js and allow you to save and manage dependencies.

Add the required dependencies

Now we'll add the required dependencies.

  1. We'll start by adding the Azure Communication Services specific ones.

    npm install --save @azure/communication-common @azure/communication-calling
  2. Followed by Parcel, which will allow us to run our app in a browser.

    npm install --save-dev parcel

Create the index HTML file

  1. Create a new file in your app directory called index.html.

  2. Enter the following text for the contents of this file.

    <!DOCTYPE html>
        <title>Azure Communication Services - Simple voice calling app</title>
        <h1>Azure Communication Services</h1>
        <h2>Simple voice calling app</h2>
        <!-- Calling HTML here -->
        <script src="./app.js" type="module"></script>

Create the app's JavaScript file

  1. Create a new file in the app directory called app.js
  2. For now leave the app.js file empty, we'll add to it during the next unit.

Test your new app

  1. In a console window, within the project directory run the following command:

    npx parcel index.html
  2. Parcel will now compile and run your app.

  3. Once it completes, it will give you a link to see your app within the browser. This link is usually http://localhost:1234/: Screenshot of Parcel, showing a complete build with a hyperlink pointing to the app.

  4. Open this link in your browser and you should see your blank app in the browser: Screenshot of our blank web app showing in a browser.