Image Gallery

Aspire sample

C# AppHost

Clone, run, and explore this sample

The app consists of two services:

AzureAzure FunctionsBlazorC#

View on GitHub Browse all samples

AppHost

The entry point that composes every resource and dependency in this sample's distributed application.

View on GitHub

using Azure.Provisioning.Storage;

var builder = DistributedApplication.CreateBuilder(args);

var env = builder.AddAzureContainerAppEnvironment("env");

var storage = builder.AddAzureStorage("storage").RunAsEmulator()
    .ConfigureInfrastructure((infrastructure) =>
    {
        var storageAccount = infrastructure.GetProvisionableResources().OfType<StorageAccount>().FirstOrDefault(r => r.BicepIdentifier == "storage")
            ?? throw new InvalidOperationException($"Could not find configured storage account with name 'storage'");

        // Ensure that public access to blobs is disabled
        storageAccount.AllowBlobPublicAccess = false;
    })
    .WithUrls(c =>
    {
        // None of the URLs are usable in the browser so hide them from the summary page
        foreach (var url in c.Urls)
        {
            url.DisplayLocation = UrlDisplayLocation.DetailsOnly;
        }
    });
var blobs = storage.AddBlobs("blobs");
var queues = storage.AddQueues("queues");

var functions = builder.AddAzureFunctionsProject("functions", "../ImageGallery.Functions/ImageGallery.Functions.csproj")
                       .WithComputeEnvironment(env)
                       .WithReference(queues)
                       .WithReference(blobs)
                       .WaitFor(storage)
                       .WithRoleAssignments(storage,
                            // Storage Account Contributor and Storage Blob Data Owner roles are required by the Azure Functions host
                            StorageBuiltInRole.StorageAccountContributor, StorageBuiltInRole.StorageBlobDataOwner,
                            // Queue Data Contributor role is required to send messages to the queue
                            StorageBuiltInRole.StorageQueueDataContributor)
                       .WithHostStorage(storage)
                       .WithUrlForEndpoint("http", u => u.DisplayText = "Functions App");

builder.AddProject<Projects.ImageGallery_FrontEnd>("frontend")
       .WithComputeEnvironment(env)
       .WithReference(queues)
       .WithReference(blobs)
       .WaitFor(functions)
       .WithExternalHttpEndpoints()
       .WithUrlForEndpoint("https", u => u.DisplayText = "Frontend App")
       .WithUrlForEndpoint("http", u => u.DisplayLocation = UrlDisplayLocation.DetailsOnly);

builder.Build().Run();

The app consists of two services:

ImageGallery.Frontend: This is a Blazor app that displays a for uploading of images, showing thumbnails of images in a grid.
ImageGallery.Functions: This is an Azure Function triggered by the arrival of a new blob using a Functions Blob Trigger.

The app also includes a class library project, ImageGallery.ServiceDefaults, that contains the service defaults used by the service projects, and the ImageGallery.AppHost Aspire App Host project.

Pre-requisites

Running the app

If using the Aspire CLI, run aspire run from this directory.

If using VS Code, open this directory as a workspace and launch the ImageGallery.AppHost project using either the Aspire or C# debuggers.

If using Visual Studio, open the solution file ImageGallery.slnx and launch/debug the ImageGallery.AppHost project.

If using the .NET CLI, run dotnet run from the ImageGallery.AppHost directory.

Preview

Sample screenshots

Select the image to zoom in.

Screenshot of the web frontend the Aspire with Azure Functions sample