Hosting Angular Apps on Azure Storage with an Azure Functions Back-end

Pingback: The Morning Brew - Chris Alcock » The Morning Brew #2640

2018-09-19T17:22:36+02:00

Greate sample ! There is one error – in CORS screenshot delete „/“ after url of function.

2019-03-07T00:04:41+01:00

Have you attempted to extend your example to secure the Azure Functions using AAD authentication? I.e., do you know how to adapt the configuration for an Angular app hosted on Azure Storage as a static website interacting with AAD-secured AZ Functions? Supposedly, the MSAL-Angular library can accommodate this scenario. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md.

LikeLike

Reply

2019-05-07T17:52:52+02:00

One issue that still exists is that you cannot add a secure custom domain, which makes this service less useful. You get a cert mismatch error when trying to do so. MS does document this at https://docs.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name and suggests using their CDN service. Which comes at additional cost and is unnecessary for some applications.

LikeLike

Reply

	public class Book
	{
	public Book() { }

	public Book(int bookId, string title, string publisher)
	=> (BookId, Title, Publisher) = (bookId, title, publisher);

	public int BookId { get; set; }
	public string Title { get; set; }
	public string Publisher { get; set; }
	public override string ToString() => Title;
	}

	public static class BooksFunction
	{
	[FunctionName("BooksFunction")]
	public static IActionResult Run(
	[HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)]HttpRequest req, TraceWriter log)
	{
	log.Info("C# HTTP trigger function processed a request.");

	return new OkObjectResult(GetBooks());
	}

	public static IEnumerable<Book> GetBooks()
	=> new List<Book>
	{
	new Book(1, "Enterprise Services with the .NET Framework", "Addison Wesley"),
	new Book(2, "Professional C# 6 and .NET Core 1.0", "Wrox Press"),
	new Book(3, "Professional C# 7 and .NET Core 2.0", "Wrox Press")
	};
	}

	import { Component, Inject } from '@angular/core';
	import { HttpClient } from '@angular/common/http';

	@Component({
	selector: 'app-books',
	templateUrl: './books.component.html',
	styleUrls: ['./books.component.css']
	})
	export class BooksComponent {
	public books: Book[];

	constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
	http.get<Book[]>(baseUrl + 'api/BooksFunction').subscribe(result => {
	this.books = result;
	console.log("retrieved" + this.books);
	console.log("title: " + this.books[0].title);
	}, error => console.error(error));
	}
	}

	interface Book {
	bookId: number;
	title: string;
	publisher: string;
	}

	<h1>Books</h1>

	<p *ngIf="!books"><em>Loading…</em></p>

	<table class='table' *ngIf="books">
	<thead>
	<tr>
	<th>Id</th>
	<th>Title</th>
	<th>Publisher</th>
	</tr>
	</thead>
	<tbody>
	<tr *ngFor="let book of books">
	<td>{{ book.bookId }}</td>
	<td>{{ book.title }}</td>
	<td>{{ book.publisher }}</td>
	</tr>
	</tbody>
	</table>

Hosting Angular Apps on Azure Storage with an Azure Functions Back-end

Prepare Azure storage

Create a Angular project

Deployment of the Angular Project

Using Azure Functions

Configuring CORS with Azure Functions

Call Azure Functions from Angular

Summary

More Information

Published by

Christian Nagel

4 thoughts on “Hosting Angular Apps on Azure Storage with an Azure Functions Back-end”

Leave a Reply to Jaroslav Jindřich (@jjindrich_cz) Cancel reply