How to save your day with simple Hello World SharePoint Page Framework Add-In depolyment in Sharepoint Online?

it is quite annoying when i try to deployed my app to SharePoint online or SharePoint 365.

since i always keep gotting the following errors.

Something went wrong

If the problem persists, contact the site administrator and give them the information in Technical Details.

***ERROR MESSAGE: ***Failed to load component "d087c0cf-1f05-4575-884c-a68d708b095f" (undefined). Original error: ***Failed to load entry point from component "d087c0cf-1f05-4575-884c-a68d708b095f" (undefined). Original error: Error loading https://component-id.invalid/d087c0cf-1f05-4575-884c-a68d708b095f_0.0.1 

 Unable to load script https://vandansolution.sharepoint.com/sites/MyTeamSite/CDN/HelloWorld/hello-world-web-part.bundle 

***CALLSTACK: Error: ***Failed to load component "d087c0cf-1f05-4575-884c-a68d708b095f" (undefined). Original error: ***Failed to load entry point from component "d087c0cf-1f05-4575-884c-a68d708b095f" (undefined). Original error: Error loading https://component-id.invalid/d087c0cf-1f05-4575-884c-a68d708b095f_0.0.1 Unable to load script https://vandansolution.sharepoint.com/sites/MyTeamSite/CDN/HelloWorld/hello-world-web-part.bundle at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:144:83608) at M (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:139:2381) at R (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:139:2469) at A (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:139:2291) at T (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:139:1887) at m (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-05-19.006/sppages-assembly_en-us_cbf51a2022764c48a50520394954a016.js:139:570)

actually the above error message did not offer any help in solving the issue. the root cause of the issue stems from the out of date Yeoman generator.  i need to clear the app that deploy to the app catelog, and update the Yeoman generator in my local development. then I update the app with new version and build the package, deployed it to the SharePoint again. then we can add this new add on from the list.

How to Invoke the Azure api from Server Side with C#?

it is quick easy to call Web Api from client side with Ajax or XMLHttpRequest.

but it is also not so hard to implement a server side execution.

we can either use HttpWebReqeust or HttpClient to call Web Api

if you use api to load data, HttpWebRequest Method should be GET.  you can skip
the GetRequestStream part.

if your action send data to server,  HttpWebRequest Method should be POST.
 

the following sample will demonstrate a call to Web API that hosted in Azure.


   public static async Task<APIResult> InvokeAzureAPICall(string url, string inputData)
        {
            try
            {
                HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);
                  req.Headers.Add("SubscriptionKey", "KEYFromAzure");

                var cert = new X509Certificate2(File.ReadAllBytes("C:\\Certs\\myCertificate.pfx"), "MYPassword");
                req.ClientCertificates.Add(cert);
   
                // from this line below only required for Post data to server
                //if passing in object are in json format.
                req.ContentType = "application/json";
                req.Method = "POST";
                Encoding encoding = new UTF8Encoding();

                byte[] dataBytes = encoding.GetBytes(inputData);
                req.ContentLength = dataBytes .Length;

                Stream stream = req.GetRequestStream();
                stream.Write(data, 0, dataBytes.Length);
                stream.Close();
              
                //ending here the above is code is required only for Post Method in the web api call. 


                WebResponse resp = await req.GetResponseAsync();

                string response = "";
                using (var readStream = new StreamReader(resp.GetResponseStream()))
                {
                    response = readStream.ReadToEnd();
                }
                return new APIResult
                {
                    apiResponse = response,
                    apiStatusCode = HttpStatusCode.OK
                };
            }
            catch (Exception ex)
            {
                string response = "";
                using (var rdstream = new StreamReader(((System.Net.WebException)ex).Response.GetResponseStream()))
                {
                    response = rdstream.ReadToEnd();
                    return new APIResult
                    {
                        apiResponse = response,
                        apiStatusCode = ((System.Net.HttpWebResponse)((System.Net.WebException)ex).Response).StatusCode
                    };
                }

            }
        }