What is Single Page Application?

• A single-page application (SPA) is a web application/website that dynamically renders content instead of refreshing the page
• A single-page application, once loaded, lives inside a browser and does not require page reloading during use

Blazor WebAssembly

Add following to .csproj file

<PropertyGroup>
  <PublishIISAssets>true</PublishIISAssets>
</PropertyGroup>

Visual Studio publish

• Add account > Login using your Azure credentials
• Right click on project > Publish

Deploy using Kudo

• Publish Blazor WebAssembly in a local folder
• Azure portal > Web App > Kudo
• Upload to wwwroot folder ('D:\home\site\wwwroot')

Angular App

Install @angular-devkit/build-angular

npm install --save-dev @angular-devkit/build-angular

To avoid build error (i.e. Error: scripts.d14xxxxxxxxx5fa.js from Terser), change setting in angular.json

• Open angular.json file
• configurations > production
  • "optimization": false
  • budgets ("type": "initial")
    • "maximumWarning": "15mb"
    • "maximumError": "20mb"
• See: https://stackoverflow.com/questions/61613614/ng-build-error-in-scripts-xx-js-from-terser-f-is-redeclared

angular.json

"configurations": {
	"production": {
	  "fileReplacements": [
		{
		  "replace": "src/environments/environment.ts",
		  "with": "src/environments/environment.prod.ts"
		}
	  ],
	  "optimization": false,
	  "outputHashing": "all",
	  "sourceMap": false,
	  "namedChunks": false,
	  "extractLicenses": true,
	  "vendorChunk": false,
	  "buildOptimizer": true,
	  "budgets": [
		{
		  "type": "initial",
		  "maximumWarning": "15mb",
		  "maximumError": "20mb"
		},
		{
		  "type": "anyComponentStyle",
		  "maximumWarning": "6kb",
		  "maximumError": "10kb"
		}
	  ]
	}
}

Now deploy Angular app to Azure App Service

• Create App Service Web App in Azure
• Open project to VCCode
• Login to Azure in VSCode
• Build angular project: ng build --prod
• VS Code Azure extension > App Service
  • Login to Azure
  • Expand target subscription > Right click on target webapp
  • “Deploy to Web App…” > Select ‘Browse...’
  • Go to ‘your/project/folder/dist’ > Select ‘XYZ’ (‘/dist/XYZ’)
• Note: you must deploy ‘dist/XYZ’ folder

Steps screenshot

Links

• https://stackoverflow.com/questions/50333003/could-not-find-module-angular-devkit-build-angular
• https://stackoverflow.com/questions/54380816/unexpected-token-punc-when-building-for-production
• https://www.c-sharpcorner.com/article/easily-deploy-angular-app-to-azure-from-visual-studio-code/