Make App Deployable without Server #65

t-sanderv · 2022-09-08T16:20:20Z

Purpose

This pull request fixes #37 by retrieving a user token from an internal Microsoft API that provisions a user and a token. It makes this available for deployment by users by issuing ARM templates for deployment to Azure.

Connection to Token-providing API

When the server is hosted in non-development environments, it cannot rely on the capabilities of the dev server to connect it to a user-proviced Azure Communications Resource. Therefore, when the front-end has to provision a user, it first tries to access any local functionality. When that fails, it tries to access https://calling-example-er.azurewebsites.net as API to provide it with a user and a token.

I advise against merging this PR. The alternative to this is to embed a small local server, like proposed in #63. In that case, the user can link the application to their own Azure Communication Service resource. The approach taken in the current PR has the following disadvantages:

Customers cannot use any bought phone numbers
Customers cannot try out direct routing configurations
All costs of calling will be for calling team, not for the client themselves
Approach might be difficult for users, they expect (in accordance with other sample apps) to connect their own Communications Resource to a sample application
CORS issues may arise for misconfigured APIs.

ARM Templates

To facilitate deployment to Azure, an ARM template has been added. This template was built using a Bicep template which can be transpiled to the JSON template using az bicep build --file <filename>. The ARM template creates an App Service that hosts the code.

One can test these ARM templates in Azure here:

Does this introduce a breaking change?

[] Yes
[X] No

Pull Request Type

What kind of change does this Pull Request introduce?

[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[X] Documentation content changes
[ ] Other... Please describe:

How to Test

Get the code

git clone https://github.com/t-sanderv/communication-services-web-calling-tutorial.git
cd communication-services-web-calling-tutorial
git checkout main
npm run setup
npm run start

Test the code

To test the deployment

Copy the contents of deploy/azuredeploy.json

What to Check

Verify that the following are valid

...

Other Information

on-behalf-of: @Azure [email protected]

…ervices-web-calling-tutorial into without-server

on-behalf-of: @Azure [email protected]

…cation-services-web-calling-tutorial into without-server

chriswhilar · 2022-09-27T21:27:25Z

README.md

@@ -8,27 +8,57 @@ products:
 - azure-communication-services
 ---

+[![Deploy To Azure](https://raw.githubusercontent.com/Azure/azure-quickstart-templates/master/1-CONTRIBUTION-GUIDE/images/deploytoazure.svg?sanitize=true)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2Fcommunication-services-web-calling-tutorial%2Fmain%2Fdeploy%2Fazuredeploy.json)


What are these links? I dont have access to these links. Are these specific to your azure account?

I see, i think this is for deplyment i think your mentioning it in the "Deplyment to azure... " section.

Why dont you just put the buttons there? Seems confusing to have them up here.

Also, what happens when i click on those buttons? Does it open up somethin in my browser and i have to do more things? Or will it just go ahead and deploy automatically? Please explain exactly wherw/how to get the deplyment url, will it show me in vscode console?

The new folder your adding, "deploy" with the .bicep and .json, please explain in the readme what these are doing

chriswhilar · 2022-09-27T21:36:24Z

Project/package.json

  },
  "scripts": {
-    "start": "webpack-dev-server --port 5000 --mode development",
-    "build": "webpack --mode development"
+    "build": "npm run clean && webpack --mode=production --env production",


You will need to be able to also run this locally(Make sure you test locally and remote). I would expect to also see scripts here for building locally.

Also, make sure when building locally it can still refresh local app when making local changes in the app code

The scripts that were there before for building locally were:
"start": "webpack-dev-server --port 5000 --mode development",
"build": "webpack --mode development"

maybe you can name these "start-local" and "build-local" or as needed.

Usually "build" is used for dev mode buildling. Id leave build for dev and do build-prod for prod/deplyment

chriswhilar · 2022-09-27T21:40:19Z

Project/web.config

@@ -0,0 +1,16 @@
+<configuration>


Is this file needed? If so, explain what it is/doing in the readme

chriswhilar · 2022-09-27T21:41:16Z

.github/workflows/push_main.yml

@@ -0,0 +1,41 @@
+name: Create Sample Release


Same here please explain what this is doing in the readme.

Is this something that happens locally or during deplyment?

Explain about the github token

chriswhilar · 2022-09-27T21:48:28Z

Project/webpack.config.js

 }

-const communicationIdentityClient = new  CommunicationIdentityClient(config.connectionString);
+const env = process.env;
+env.development = false;


You cannot hard code this, it needs to work both locally and deplyment

This variable basically gets set when running webpack and passing the env flag. If you pass env prod, this flag will be set to true. It is not something that you should set on your own.

chriswhilar · 2022-09-27T21:50:26Z

Project/webpack.config.js


-const PORT = process.env.port || 8080;
+const isProd = env.development == null || 


You should not have to do so many checks to see if your in prod. One flag check should be enough to truly kno wether ur in prod or not.

For example, a script can just passe flag "--env production", this tells your your going to build in prod and end up building in prod

chriswhilar · 2022-09-27T21:53:45Z

Project/webpack.config.js


 module.exports = {
-    devtool: 'inline-source-map',
-    mode: 'development',
+    ...(isProd ? {} : { devtool: 'eval-source-map' }),


why eval instead of inline. What is the difference?

chriswhilar · 2022-09-27T21:57:27Z

Project/webpack.config.js

 }

-const communicationIdentityClient = new  CommunicationIdentityClient(config.connectionString);
+const env = process.env;
+env.development = false;


This variable basically gets set when running webpack and passing the env flag. If you pass env prod, this flag will be set to true. It is not something that you should set on your own.

chriswhilar · 2022-09-27T22:03:52Z

README.md

+
+## Deployment to Azure
+
+Use the blue buttons above.


So this will bring me to a portal where i have to do more things. You need to explain what i have to do in the portal.

Also, i should be able to deploy this manually therough the azure app service extension in vscode:

I right click on an app service and then click on "Deply to web app". We have always been deploying this way so this mehtod of deplyment should also work. It will deploy to .azurewebsites.net

t-sanderv added 30 commits July 29, 2022 17:05

Rename Project to Client

29f3368

Add Server code

3dbb575

Add deployment script

feb6c4d

Fix deployment settings

aee4c50

Add www file

1e329f9

Do not exclude bin directory

578a9bb

Change port of devserver

0732c4c

Fix error where object is not serialized

583be99

Load package from github instead of Azure

b875c4f

Remove server build output

d54727a

Add ARM for deployment without existing communication resource

de7af90

Remove unnecessary code

8e9714d

Fixed tests

be594fa

Fixed references to repo

ece438b

Describe new directory structure

1851437

Update documentation mistakes

90b708c

Update documentation mistakes

7ece75e

Change package url in preparation for PR

4d4b1f5

Update package versions

a8b67e8

Update package versions

da6a458

Updated all packages for dependabot

b7c0ce2

Make communicationServicesResourceId a variable instead of a parameter

d508a0b

Removed unused packages

52fc330

Add webpack-cli dev dependency

3ef8c6e

Rename Project to Client

1c370bb

Add Server code

b9e5a86

Add deployment script

b18802e

Fix deployment settings

a2d4cc0

Add www file

3039dc1

Do not exclude bin directory

b400980

t-sanderv and others added 27 commits August 17, 2022 11:42

Rename release package

c63170d

Removed unnecessary code and files

e8cf9a0

Added properties as workaround for ARM bug

2d8d8df

Changed location variable and descriptions

a8b1c2f

Changed location of deployment from param to var

4bbd719

Clean up client side

938e182

Create release on push to main

b01c5f9

Create release on push to main

26fc1dc

Create release on push to main

1d7cd2e

Create release on push to main

d559a60

Configured API

e69724e

ci: add Azure Static Web Apps workflow file

34e7ea5

on-behalf-of: @Azure [email protected]

Merge branch 'without-server' of github.com:t-sanderv/communication-s…

cd45755

…ervices-web-calling-tutorial into without-server

Change directories

39e8fcb

Change build dir

ac0aded

Again build dir change

77372e0

Commit made from VS Code Azure Static Web Apps

2aab716

ci: add Azure Static Web Apps workflow file

8199c4d

on-behalf-of: @Azure [email protected]

Merge branch 'without-server' of https://github.com/t-sanderv/communi…

dfcce95

…cation-services-web-calling-tutorial into without-server

Enable Azure storage static website

3424909

Changed package name

35c433e

Fix appservice with static content

8d3b4f7

Add parameters file

19947e3

Test better deployment settings

a1b1fd4

Clean up files for PR

7d9f908

Correct links to deployment template

3ee7fa5

Update docs

681d203

chriswhilar reviewed Sep 27, 2022

View reviewed changes

chriswhilar closed this Sep 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make App Deployable without Server #65

Make App Deployable without Server #65

t-sanderv commented Sep 8, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022

chriswhilar Sep 27, 2022


		const PORT = process.env.port \|\| 8080;
		const isProd = env.development == null \|\|

Make App Deployable without Server #65

Make App Deployable without Server #65

Conversation

t-sanderv commented Sep 8, 2022

Purpose

Connection to Token-providing API

ARM Templates

Does this introduce a breaking change?

Pull Request Type

How to Test

What to Check

Other Information

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment