Edi Wang

Microsoft MVP for Azure

Web Development HTML, JavaScript, CSS

How to Set no-cache Header for index.html in Azure Static Web Apps

When hosting an Angular application on Azure Static Web Apps, there is one small caching detail that can cause a surprisingly annoying issue: index.html can be cached by the browser. That might sound harmless at first, but for a single-page application it can prevent users from getting the latest version of the app after a deployment. The fix is simple: tell Azure Static Web Apps to instruct the browser not to cache index.html. In this blog post, I will explain how to configure Azure Static Web Apps to set no cache header for index.html.
Azure Angular

Adding Azure Bicep Language Support for highlight.js

I am using highlight.js to render code snippets on this blog system. However, the official pack of highlight.js does not have Bicep as one of the languages. To add support for the Bicep language in highlight.js, you need to implement a Bicep language definition module. Below are the detailed steps and code examples.
Azure Bicep

Call API with Windows Authentication from Blazor Web Assembly

I was rewriting an old Angular application to Blazor Web Assembly a couple of days ago. The App is an internal tool, which uses a backend API that has Windows Authentication. However, when calling API from HttpClient that UseDefaultCredentials, Blazor will throw PlatformNotSupportedException. The majority of internet search so far tell you it's not possible. Really? Let's see how to make it work! …
.NET Web API Blazor

Solving "npm install" ECONNRESET Error on Azure DevOps

A few months ago, my Angular project on Azure DevOps started to have build failure very often. Error message is "npm ERR! network read ECONNRESET", which indicates npm can't connect to internet. This problem does not happen every time, usually re-run failed jobs several times can produce a good build. But still, this is very annoying. So, I took some time to investigate and solve it. …
Azure DevOps NPM

How to Activate Kendo UI License in Azure Static Web Apps Without Exposing Secret Value

I have an open-source project that uses Kendo UI for Angular. In order for users to have BYOL model, I could not include the license file in my public repository. There is no example of how to activate Kendo license during SWA build process. Let's see how to activate Kendo UI license during the build process of Azure Static Web Apps without including the license itself in repository. …
Azure Kendo UI GitHub

Deploy to Azure Static Web App from Local Machine without GitHub Action

When creating Azure Static Web App in Azure portal. The deployment options did not provide clear instructions for how to deploy without creating a project and CI/CD pipeline on GitHub or Azure DevOps. Many times, we just want to deploy a simple one-time project from a local computer. Let's see how to do this.
Azure

Make NPM Install with Legacy Peer Deps in Azure Static Web Apps Builds

After upgrading a JS library, GitHub Action for build and deploy Azure Static Web Apps blows up sky high. According to the error message. npm install command need to run with --legacy-peer-deps. However, there is no step of npm install in Azure Static Web Apps's yml file. How can we tell npm to use legacy peer deps? …
Azure NPM

How to Add Parameters for 'npm install' in Azure DevOps

Recently my Azure DevOps build pipeline failed because Azure is using npm 8.x, which will have issue for angular projects when running `npm install`.  This is a known issue which can be solved by using `--legacy-peer-deps` or `--force` for the `npm install` command. However, Azure DevOps's npm task does not take parameters by default. Let's see how we can use these parameters in Azure DevOps. …
Azure DevOps NPM