Hacking Izon Cameras and using Azure IoT Edge

After Izon announced that they were closing down their services (leaving the cameras I already owned useless), I decided to turn them into something useful using Azure. First let me list some resources:

Use the Will it hack link to get access to the mobileye website and verify that the Izon device is still streaming and still working. If it is working, you are already done with edits to the device unless you would like to change the passwords (which you should).

Our goals are as follows:

  • Process the video feed from the Izon camera (we will cheat this early on and only use the image feed)
    • Check for motion
    • Check for faces
    • Check if faces are white listed
    • Check for my dog
  • Process the audio feed
    • Check for any noise
    • Check for non human noises
    • Check for dog barks
    • Check for my and my wife’s voice

These are all stretch goals that will be referred back to as the project moves forward.

Create the Azure IoT Edge module

For the first module, we will use the C Module base image. We are looking for two things from this module:

  • Download the picture feed and pass it to the Edge Hub
  • Download the audio feed and pass it to the Edge Hub

If you don’t know where to get started with the C module of the Azure IoT Edge platform, there is helpful information on the Azure Documentation page. Once the C module is created and ready for editing, we are going to connect to the image feed from the devices. To make this simple, both feeds will be retrieved using HTTP. For the video feed, its simple enough to grab images from the Izon camera existing camera feed.

Now one thing we need, is to be able to connect to each camera within the local network shared with the Edge. Since we would like to be able to add and remove cameras, we will use the device twin to update and manage the list of IP address. The code for updating the list is as follows:


#include <stdio.h>
#include <stdlib.h>
#include "iothub_module_client_ll.h"
#include "iothub_client_options.h"
#include "iothub_message.h"
#include "azure_c_shared_utility/threadapi.h"
#include "azure_c_shared_utility/crt_abstractions.h"
#include "azure_c_shared_utility/platform.h"
#include "azure_c_shared_utility/shared_util_options.h"
#include "iothubtransportmqtt.h"
#include "iothub.h"
#include "time.h"
#include "parson.h"
typedef struct IP_ADDRESS_NODE
{
const char * address;
struct IP_ADDRESS_NODE * next;
} ip_address_node;
ip_address_node * add_address(const char * address,ip_address_node * previous)
{
ip_address_node * new_node = (ip_address_node *)malloc(sizeof(ip_address_node));
new_node->address = address;
new_node->next = NULL;
if (previous == NULL)
{
return new_node;
}
previous->next = new_node;
return previous;
}
void delete_address(ip_address_node * current)
{
if (current == NULL)
{
return;
}
delete_address(current->next);
//free(current->address);
free(current);
}
ip_address_node * root_node = NULL;
ip_address_node * add_address_to_root(const char * address)
{
if (root_node = NULL)
{
root_node = add_address(address,root_node);
}
ip_address_node * current = root_node;
while(current->next != NULL)
{
current = current->next;
}
add_address(address,current);
}
static void moduleTwinCallback(DEVICE_TWIN_UPDATE_STATE update_state, const unsigned char* payLoad, size_t size, void* userContextCallback)
{
printf("\r\nTwin callback called with (state=%s, size=%zu):\r\n%s\r\n",
ENUM_TO_STRING(DEVICE_TWIN_UPDATE_STATE, update_state), size, payLoad);
JSON_Value *root_value = json_parse_string(payLoad);
JSON_Object *root_object = json_value_get_object(root_value);
JSON_Array * ipaddresses = json_object_dotget_array(root_object, "desired.CameraAddresses");
if (ipaddresses != NULL) {
delete_address(root_node);
for (int i = 0; i < json_array_get_count(ipaddresses); i++) {
add_address_to_root(json_array_get_string(ipaddresses,i));
}
return;
}
ipaddresses = json_object_get_array(root_object, "CameraAddresses");
if (ipaddresses != NULL) {
delete_address(root_node);
for (int i = 0; i < json_array_get_count(ipaddresses); i++) {
add_address_to_root(json_array_get_string(ipaddresses,i));
}
return;
}
}

view raw

main.c

hosted with ❤ by GitHub

With that code in place, the list of IP addresses can be updated from the Azure UI and the Azure Service SDKs.

Downloading from the Image feed

The Izon cameras make downloading the image feed trivial. There is an existing endpoint where you can grab the latest image directly from the camera’s web server. The latest image is always at /cgi-bin/img-d1.cgi. (NOTE: if you are checking this image from a browser, be sure to have some cache busting!). To download this image into our module, we will use the Curl library for it’s easy HTTP implementation. To add Curl to our Edge module, we will add the following lines to the Dockerfile.amd64.debug:


FROM ubuntu:xenial AS base
RUN apt-get update && \
apt-get install -y –no-install-recommends software-properties-common gdb && \
add-apt-repository -y ppa:aziotsdklinux/ppa-azureiot && \
apt-get update && \
apt-get install -y azure-iot-sdk-c-dev && \
rm -rf /var/lib/apt/lists/*
FROM base AS build-env
RUN apt-get update && \
apt-get install -y –no-install-recommends cmake gcc g++ make libcurl4-openssl-dev && \
rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY . ./
RUN cmake -DCMAKE_BUILD_TYPE=Debug .
RUN make
FROM base
WORKDIR /app
COPY –from=build-env /app ./
CMD ["./main"]


FROM ubuntu:xenial AS base
RUN apt-get update && \
apt-get install -y –no-install-recommends software-properties-common gdb && \
add-apt-repository -y ppa:aziotsdklinux/ppa-azureiot && \
apt-get update && \
apt-get install -y azure-iot-sdk-c-dev && \
rm -rf /var/lib/apt/lists/*
FROM base AS build-env
RUN apt-get update && \
apt-get install -y –no-install-recommends cmake gcc g++ make && \
rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY . ./
RUN cmake -DCMAKE_BUILD_TYPE=Debug .
RUN make
FROM base
WORKDIR /app
COPY –from=build-env /app ./
CMD ["./main"]

With curl now added to the image, it can be utilized in code by adding it to the method invoked in our main loop. The code will download the file for each entry in the IP address list. Once the image is downloaded, it will send it as a message to the Edge Hub and add the IP address of the camera to the message header. Here is that code:


struct MemoryStruct {
char *memory;
size_t size;
};
static size_t
WriteMemoryCallback(void *contents, size_t size, size_t nmemb, void *userp)
{
size_t realsize = size * nmemb;
struct MemoryStruct *mem = (struct MemoryStruct *)userp;
char *ptr = realloc(mem->memory, mem->size + realsize + 1);
if(ptr == NULL) {
/* out of memory! */
printf("not enough memory (realloc returned NULL)\n");
return 0;
}
mem->memory = ptr;
memcpy(&(mem->memory[mem->size]), contents, realsize);
mem->size += realsize;
mem->memory[mem->size] = 0;
return realsize;
}
struct MemoryStruct download_file(const char * address)
{
struct MemoryStruct chunk;
chunk.memory = malloc(1); /* will be grown as needed by the realloc above */
chunk.size = 0; /* no data at this point */
/* init the curl session */
CURL * curl_handle = curl_easy_init();
/* specify URL to get */
curl_easy_setopt(curl_handle, CURLOPT_URL, address);
/* send all data to this function */
curl_easy_setopt(curl_handle, CURLOPT_WRITEFUNCTION, WriteMemoryCallback);
/* we pass our 'chunk' struct to the callback function */
curl_easy_setopt(curl_handle, CURLOPT_WRITEDATA, (void *)&chunk);
/* some servers don't like requests that are made without a user-agent
field, so we provide one */
curl_easy_setopt(curl_handle, CURLOPT_USERAGENT, "libcurl-agent/1.0");
/* get it! */
CURLcode res = curl_easy_perform(curl_handle);
/* check for errors */
if(res != CURLE_OK) {
fprintf(stderr, "curl_easy_perform() failed: %s\n",
curl_easy_strerror(res));
}
/* cleanup curl stuff */
curl_easy_cleanup(curl_handle);
return chunk;
}
void download_image(IOTHUB_MODULE_CLIENT_LL_HANDLE iotHubModuleClientHandle)
{
ip_address_node * address_node = root_node;
do
{
struct MemoryStruct image = download_file(address_node->address);
if (image.size > 1)
{
IOTHUB_MESSAGE_HANDLE message_handle = IoTHubMessage_CreateFromByteArray((char*)image.memory, image.size);
MAP_HANDLE propMap = IoTHubMessage_Properties(message_handle);
Map_AddOrUpdate(propMap, "IpAddress", address_node->address);
IOTHUB_CLIENT_RESULT clientResult = IoTHubModuleClient_LL_SendEventToOutputAsync(iotHubModuleClientHandle, message_handle, "IncomingImage", NULL,NULL);
if (clientResult != IOTHUB_CLIENT_OK)
{
IoTHubMessage_Destroy(message_handle);
printf("IoTHubModuleClient_LL_SendEventToOutputAsync failed on sending to output IncomingImage, err=%d\n", clientResult);
}
}
free(image.memory);
address_node = address_node->next;
} while(address_node != NULL);
}

view raw

main.c

hosted with ❤ by GitHub

Downloading from the Audio feed

Now that the image feed is being published to the Edge Hub, its time to connect the audio feed. The audio feed is trickier since the Izon camera doesn’t have an easy to use endpoint (that I know of) for downloading the audio samples like we can with the image feed. In the next entry in this series, an Audio feed will be derived from an RSTP stream.

 

South Florida Code Camp – Azure IoT Overview

March 2nd 2019, I will be presenting Azure IoT Overview at the South Florida Code Camp in Davie, FL. You can register here – and its FREE. Here is the synopsis of the presentation:

Abstract

Keeping up to date on all the new services and features for an entire cloud portfolio could be a full-time job. In this presentation, we will look at the state of IoT in Microsoft Azure and discuss how the different services work together to implement an enterprise solution. Use this presentation to get an overview of architecture and products so that the next time you are presented with an IoT problem in Azure you know the solution.

 

 

Authoring for Pluralsight

Coming soon I will be authoring a course for Pluralsight titled – “Identify Existing Products, Services and Technologies in Use For Microsoft Azure” . This course targets software developers who are looking to get started with Microsoft Azure services to build modern cloud-enabled solutions and want to further extend their knowledge of those services by learning how to use existing products, services, and technologies offered by Microsoft Azure.

Microsoft Azure is a host for almost any application, but determining how to use it within existing workflows is paramount for success. In this course, Identify Existing Products, Services and Technologies in Use, you will learn how to integrate existing workflows, technologies, and processes with Microsoft Azure.

We explore Microsoft Azure with the following technologies:

  • Languages, Frameworks, and IDEs –
    • IntelliJ IDEA
    • WebStorm
    • Visual Studio Code
    • .NET Core
    • C#
    • Java
    • JavaScript
    • Spring
    • NodeJS
    • Docker
  • Microsoft Azure Products
    • Azure App Services
    • Azure Kubernetes
    • Azure Functions
    • Azure IoT Hub

Hopefully we can take a developer familiar with the languages, frameworks, and ides available and make have them up and running on Microsoft Azure after this short course.

Hosting a permanent redirect in Azure

WordPress charges for each domain attached to a blog. That is a bit much when you consider .net, .org, .whatever domains that are used on top of the .com domain most use. To get the use out of a single domain, a permanent redirect can be used.  Since Azure has a fixed price, invariant of how many domains you host there; it can be used for the permanent redirect.

Prerequisites

To complete this tutorial:

  • Create an App Service app, or use an app that you created for another tutorial.
  • Purchase a domain name and make sure you have access to the DNS registry for your domain provider (such as GoDaddy).

    For example, to add DNS entries for contoso.com and www.contoso.com, you must be able to configure the DNS settings for the contoso.comroot domain.

    Note

    If you don’t have an existing domain name, consider purchasing a domain using the Azure portal.

Prepare the app

To map a custom DNS name to a web app, the web app’s App Service plan must be a paid tier (Shared, Basic, Standard, or Premium). In this step, you make sure that the App Service app is in the supported pricing tier.

Note

App Service Free and Shared (preview) hosting plans are base tiers that run on the same Azure VM as other App Service apps. Some apps may belong to other customers. These tiers are intended to be used only for development and testing purposes.

Sign in to Azure

Open the Azure portal and sign in with your Azure account.

From the left menu, select App Services, and then select the name of the app.

Portal navigation to Azure app

You see the management page of the App Service app.

Check the pricing tier

In the left navigation of the app page, scroll to the Settings section and select Scale up (App Service plan).

Scale-up menu

The app’s current tier is highlighted by a blue border. Check to make sure that the app is not in the F1 tier. Custom DNS is not supported in the F1tier.

Check pricing tier

If the App Service plan is not in the F1 tier, close the Scale up page and skip to Map a CNAME record.

Scale up the App Service plan

Select any of the non-free tiers (D1, B1, B2, B3, or any tier in the Production category). For additional options, click See additional options.

Click Apply.

Check pricing tier

When you see the following notification, the scale operation is complete.

Scale operation confirmation

Map your domain

You can use either a CNAME record or an A record to map a custom DNS name to App Service. Follow the respective steps:

Note

You should use CNAME records for all custom DNS names except root domains (for example, contoso.com). For root domains, use A records.

Map a CNAME record

In the tutorial example, you add a CNAME record for the www subdomain (for example, www.contoso.com).

Access DNS records with domain provider

Note

You can use Azure DNS to configure a custom DNS name for your Azure Web Apps. For more information, see Use Azure DNS to provide custom domain settings for an Azure service.

Sign in to the website of your domain provider.

Find the page for managing DNS records. Every domain provider has its own DNS records interface, so consult the provider’s documentation. Look for areas of the site labeled Domain Name, DNS, or Name Server Management.

Often, you can find the DNS records page by viewing your account information, and then looking for a link such as My domains. Go to that page and then look for a link that is named something like Zone file, DNS Records, or Advanced configuration.

The following screenshot is an example of a DNS records page:

Example DNS records page

In the example screenshot, you select Add to create a record. Some providers have different links to add different record types. Again, consult the provider’s documentation.

Note

For certain providers, such as GoDaddy, changes to DNS records don’t become effective until you select a separate Save Changes link.

Create the CNAME record

Add a CNAME record to map a subdomain to the app’s default hostname (<app_name>.azurewebsites.net, where <app_name> is the name of your app).

For the www.contoso.com domain example, add a CNAME record that maps the name www to <app_name>.azurewebsites.net.

After you add the CNAME, the DNS records page looks like the following example:

Portal navigation to Azure app

Enable the CNAME record mapping in Azure

In the left navigation of the app page in the Azure portal, select Custom domains.

Custom domain menu

In the Custom domains page of the app, add the fully qualified custom DNS name (www.contoso.com) to the list.

Select the + icon next to Add hostname.

Add host name

Type the fully qualified domain name that you added a CNAME record for, such as www.contoso.com.

Select Validate.

The Add hostname page is shown.

Make sure that Hostname record type is set to CNAME (www.example.com or any subdomain).

Select Add hostname.

Add DNS name to the app

It might take some time for the new hostname to be reflected in the app’s Custom domains page. Try refreshing the browser to update the data.

CNAME record added

Note

To add an SSL binding, see Bind an existing custom SSL certificate to Azure Web Apps.

If you missed a step or made a typo somewhere earlier, you see a verification error at the bottom of the page.

Verification error

Map an A record

In the tutorial example, you add an A record for the root domain (for example, contoso.com).

Copy the app’s IP address

To map an A record, you need the app’s external IP address. You can find this IP address in the app’s Custom domains page in the Azure portal.

In the left navigation of the app page in the Azure portal, select Custom domains.

Custom domain menu

In the Custom domains page, copy the app’s IP address.

Portal navigation to Azure app

Access DNS records with domain provider

Note

You can use Azure DNS to configure a custom DNS name for your Azure Web Apps. For more information, see Use Azure DNS to provide custom domain settings for an Azure service.

Sign in to the website of your domain provider.

Find the page for managing DNS records. Every domain provider has its own DNS records interface, so consult the provider’s documentation. Look for areas of the site labeled Domain Name, DNS, or Name Server Management.

Often, you can find the DNS records page by viewing your account information, and then looking for a link such as My domains. Go to that page and then look for a link that is named something like Zone file, DNS Records, or Advanced configuration.

The following screenshot is an example of a DNS records page:

Example DNS records page

In the example screenshot, you select Add to create a record. Some providers have different links to add different record types. Again, consult the provider’s documentation.

Note

For certain providers, such as GoDaddy, changes to DNS records don’t become effective until you select a separate Save Changes link.

Create the A record

To map an A record to an app, App Service requires two DNS records:

  • An A record to map to the app’s IP address.
  • A TXT record to map to the app’s default hostname <app_name>.azurewebsites.net. App Service uses this record only at configuration time, to verify that you own the custom domain. After your custom domain is validated and configured in App Service, you can delete this TXT record.

For the contoso.com domain example, create the A and TXT records according to the following table (@ typically represents the root domain).

Record type Host Value
A @ IP address from Copy the app’s IP address
TXT @ <app_name>.azurewebsites.net

When the records are added, the DNS records page looks like the following example:

DNS records page

Enable the A record mapping in the app

Back in the app’s Custom domains page in the Azure portal, add the fully qualified custom DNS name (for example, contoso.com) to the list.

Select the + icon next to Add hostname.

Add host name

Type the fully qualified domain name that you configured the A record for, such as contoso.com.

Select Validate.

The Add hostname page is shown.

Make sure that Hostname record type is set to A record (example.com).

Select Add hostname.

Add DNS name to the app

It might take some time for the new hostname to be reflected in the app’s Custom domains page. Try refreshing the browser to update the data.

A record added

Note

To add an SSL binding, see Bind an existing custom SSL certificate to Azure Web Apps.

If you missed a step or made a typo somewhere earlier, you see a verification error at the bottom of the page.

Verification error

Map a wildcard domain

In the tutorial example, you map a wildcard DNS name (for example, *.contoso.com) to the App Service app by adding a CNAME record.

Access DNS records with domain provider

Note

You can use Azure DNS to configure a custom DNS name for your Azure Web Apps. For more information, see Use Azure DNS to provide custom domain settings for an Azure service.

Sign in to the website of your domain provider.

Find the page for managing DNS records. Every domain provider has its own DNS records interface, so consult the provider’s documentation. Look for areas of the site labeled Domain Name, DNS, or Name Server Management.

Often, you can find the DNS records page by viewing your account information, and then looking for a link such as My domains. Go to that page and then look for a link that is named something like Zone file, DNS Records, or Advanced configuration.

The following screenshot is an example of a DNS records page:

Example DNS records page

In the example screenshot, you select Add to create a record. Some providers have different links to add different record types. Again, consult the provider’s documentation.

Note

For certain providers, such as GoDaddy, changes to DNS records don’t become effective until you select a separate Save Changes link.

Create the CNAME record

Add a CNAME record to map a wildcard name to the app’s default hostname (<app_name>.azurewebsites.net).

For the *.contoso.com domain example, the CNAME record will map the name * to <app_name>.azurewebsites.net.

When the CNAME is added, the DNS records page looks like the following example:

Portal navigation to Azure app

Enable the CNAME record mapping in the app

You can now add any subdomain that matches the wildcard name to the app (for example, sub1.contoso.com and sub2.contoso.com match *.contoso.com).

In the left navigation of the app page in the Azure portal, select Custom domains.

Custom domain menu

Select the + icon next to Add hostname.

Add host name

Type a fully qualified domain name that matches the wildcard domain (for example, sub1.contoso.com), and then select Validate.

The Add hostname button is activated.

Make sure that Hostname record type is set to CNAME record (www.example.com or any subdomain).

Select Add hostname.

Add DNS name to the app

It might take some time for the new hostname to be reflected in the app’s Custom domains page. Try refreshing the browser to update the data.

Select the + icon again to add another hostname that matches the wildcard domain. For example, add sub2.contoso.com.

CNAME record added

Edit the web.config using Kudu Console

There are two ways to access Kudu:

  1. Simply modify your website URL and by adding scm to it. If you site is http://mysite.azurewebsites.net/, then the root URL of the Kudu service is https://mysite.scm.azurewebsites.net/. Note the added scm token.
  2. Using the Azure Portal. First Navigate to your Web App, Select Tools -> Kudu -> Go:

launch Kudu from azure portal

How to View, Add, Edit, and Remove files in Azure Web App using Kudu

Finally this post was about how you actually view, edit, add, and remove files from the Web App. Once you have your Kudu service Dashboard open you will see some basic information and links for more complex tasks:

Kudu home page

View Current Files

View current files in your application by Clicking on Debug Console -> CMD:

Kudu view files

Once you are viewing the folder structure you can get to your application home directory by clicking the site folder:

Kudu site folder

 

Edit Files

To edit a file click the pencil icon:

launch Kudu from azure portal

Locate the web.config (or create it) and change the text to the following:


<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Redirect old-domain to new-domain" stopProcessing="true">
<match url=".*" />
<action type="Redirect" url="http://<<appdomain>>/{R:0}" redirectType="Permanent" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

view raw

web.config

hosted with ❤ by GitHub

Replace <<appdomain>> with the domain you wish to redirect to.

 

Update Conference Prague

I have been selected to speak at Update Conference Prague during 

  •  Enable IoT with Edge Computing and Machine Learning
  • Virtual Reality and IoT – Interacting with the changing world

Enable IoT with Edge Computing and Machine Learning

Being able to run compute cycles on local hardware is a practice predating silicon circuits. Mobile and Web technology has pushed computation away from local hardware and onto remote servers. As prices in the cloud have decreased, more and more of the remote servers have moved there. This technology cycle is coming full circle with pushing the computation that would be done in the cloud down to the client. The catalyst for the cycle completing is latency and cost. Running computations on local hardware softens the load in the cloud and reduces overall cost and architectural complexity.

The difference now is how the computational logic is sent to the device. As of now, we rely on app stores and browsers to deliver the logic the client will use. Delivery mechanisms are evolving into writing code once and having the ability to run that logic in the cloud and push that logic to the client through your application and have that logic run on the device. In this presentation, we will look at how to accomplish this with existing Azure technologies and how to prepare for upcoming technologies to run these workloads.

Virtual Reality and IoT – Interacting with the changing world

Using IoT Devices, powered by Windows 10 IoT and Raspbian, we can collect data from the world surrounding us. That data can be used to create interactive environments for mixed reality, augmented reality, or virtual reality. To move the captured data from the devices to the interactive environment, the data will travel through Microsoft’s Azure. First it will be ingested through the Azure IoT Hub which provides the security, bi-directional communication, and input rates needed for the solution. We will move the data directly from the IoT Hub to an Azure Service Bus Topic. The Topic allows for data to be sent to every Subscription listening for the data that was input. Azure Web Apps subscribe to the Topics and forward the data through a SignalR Hub that forwards the data to a client. For this demo, the client is a Unity Application that creates a Virtual Reality simulation showcasing that data.

Once finished with this introduction to these technologies, utilizing each component of this technology stack should be approachable. Before seeing the pieces come together, the technologies used in this demonstration may not seem useful to a developer. When combined, they create a powerful tool to share nearly unlimited amounts of incoming data across multiple channels.

WordPress iFrame using Azure

There was a need to host some javascript in a WordPress page due to how sessionize embeds speaker sessions. Due to WordPress’ limitations on javascript usage, the script could not be used in the page. To bypass this limitation, an Azure website can host the script; and then be used as an iFrame inside the WordPress page. To accomplish this requires the following steps:

  • Create an Azure Website
  • Change the page to include the script
  • Host the script as an iFrame in WordPress page

Create an Azure Website

Azure Web Apps provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy a basic HTML+CSS site to Azure Web Apps. You’ll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Home page of sample app

If you don’t have an Azure subscription, create a free account before you begin.

Open Azure Cloud Shell

Azure Cloud Shell is a free, interactive shell that you can use to run the steps in this article. Common Azure tools are preinstalled and configured in Cloud Shell for you to use with your account. Just select the Copy button to copy the code, paste it in Cloud Shell, and then press Enter to run it. There are a few ways to open Cloud Shell:

Select Try It in the upper-right corner of a code block. Cloud Shell in this article
Open Cloud Shell in your browser. https://shell.azure.com/bash
Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. Cloud Shell in the portal

Install web app extension for Cloud Shell

To complete this quickstart, you need to add the az web app extension. If the extension is already installed, you should update it to the latest version. To update the web app extension, type az extension update -n webapp.

To install the webapp extension, run the following command:

az extension add -n webapp

When the extension has been installed, the Cloud Shell shows information to the following example:

The installed extension 'webapp' is in preview.

Download the sample

In the Cloud Shell, create a quickstart directory and then change to it.

mkdir quickstart

cd quickstart

Next, run the following command to clone the sample app repository to your quickstart directory.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

Create a web app

Change to the directory that contains the sample code and run the az webapp up command.

In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world

az webapp up -n <app_name>

The az webapp up command does the following actions:

  • Create a default resource group.
  • Create a default app service plan.
  • Create an app with the specified name.
  • Zip deploy files from the current working directory to the web app.

This command may take a few minutes to run. While running, it displays information similar to the following example:

{
  "app_url": "https://<app_name>.azurewebsites.net",
  "location": "Central US",
  "name": "<app_name>",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_CentralUS ",
  "serverfarm": "appsvc_asp_Windows_CentralUS",
  "sku": "FREE",
  "src_path": "/home/username/quickstart/html-docs-hello-world ",
  < JSON data removed for brevity. >
}

Make a note of the resourceGroup value. You need it for the clean up resources section.

Browse to the app

In a browser, go to the Azure web app URL: http://<app_name>.azurewebsites.net.

The page is running as an Azure App Service web app.

Sample app home page

Congratulations! You’ve deployed your first HTML app to App Service.

Change the page to include the script

In the Cloud Shell, type nano index.html to open the nano text editor. Change the body of the app to include only the javascript tag you need.

Save your changes and exit nano. Use the command ^O to save and ^X to exit.

You’ll now redeploy the app with the same az webapp up command.

az webapp up -n <app_name>

Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Updated sample app home page

 

Host the script as an iFrame in WordPress page

In your WordPress page, add the following text in square brackets – iframe src=”https://<app_name&gt;.azurewebsites.net/” where app_name is the name of the application you created in Azure.