Exercise - Scaffolding a voice calling web app

3 minutes

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

Create app folder

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
```
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.

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

npm install --save @azure/communication-common @azure/communication-calling

Followed by Parcel, which will allow us to run our app in a browser.
```
npm install --save-dev parcel
```

Create the index HTML file

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

Enter the following text for the contents of this file.

<!DOCTYPE html>
<html>
  <head>
    <title>Azure Communication Services - Simple voice calling app</title>
  </head>
  <body>
    <h1>Azure Communication Services</h1>
    <h2>Simple voice calling app</h2>

    <!-- Calling HTML here -->

    <script src="./app.js" type="module"></script>
  </body>
</html>

Create the app's JavaScript file

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

Test your new app

In a console window, within the project directory run the following command:
```
npx parcel index.html
```
Parcel will now compile and run your app.
Once it completes, it will give you a link to see your app within the browser. This link is usually http://localhost:1234/:
Open this link in your browser and you should see your blank app in the browser: