Skip to main content
Launch demo
demo introduction

Real-time Scoreboard

live demo

Install npm packages

npm install

Start demo

Copy Connection String from Keys tab of the created Azure Web PubSub service, and replace the <connection-string> below with the value of your Connection String.

Connection String

Linux:

export WebPubSubConnectionString="<connection_string>"
npm run dev:all

Windows:

SET WebPubSubConnectionString=<connection_string>
npm run dev:all

Expose localhost for local development

See documentation.

Configure event handlers

See documentation.

Deploy to Azure

You can deploy to Azure by using the Deploy to Azure button or Bicep file with Azure CLI.

Deploy all with one click

Deploy to Azure

Visit your live demo

  1. When the deployment completes, you will get the following blade.

    deployment-success

  2. Click Outputs on the left, you will get your demo link. deployment outputs

  3. Visit the demo link in browser to play with your live demo.

Deploy Azure resources with Bicep

If you want to customize Azure resources to be created or demo code, you can deploy to Azure in the following steps:

  1. Deploy resources to Azure
az group create -n <group-name> -l <location>
az deployment group create --resource-group <resource-group-name> --template-file ./deploy/deploy.bicep
  1. Deploy demo package to your App Service
# build and pack the demo to scoreboard_0.1.0.zip if you modify the code
npm run pack:zip

# deploy demo with scoreboard_0.1.0.zip
az webapp deploy --resource-group <resource-group> --name <webapp-resource-name> --src-path ./scoreboard_0.1.0.zip --type zip