[Part 1] - Practice Azure services - Build a small storage management app - Upload document feature

This series aims to showcase the integration of Azure services. It consists of several sections.

In this initial part, we concentrate on creating a document upload feature utilizing various Azure services. For the first post, we will employ these services at a fundamental level.

Scenario

The document management feature is required to save various documents (such as import documents, export documents, etc.).

Prerequisites

- An Azure subscription.

- Visual Studio or Visual Studio Code.

- A basic understanding of the Azure services referenced in this article and the ability to create them (using the Azure portal or Bicep, for example) is necessary.

Tech stacks

- ASP.NET CORE 8

- Vue.js 3, PrimeVue

How we use Azure service for this functionality

+ Azure blob storage: for uploading document files.

+ Azure table storage: to store the document types

+ Azure SQL Database: to save the document information such as document type, document URL...

+ Azure App Service: to host the storage API

+ Static Web App: to serve the Vue single-page application (SPA).

To authenticate the SQL Database and Storage account, we will use connection string (shared key) for these services.

Overview architecture

1 - User access document management page, list document is loaded from SQL database and user would like to upload new document

2, 3 - SPA obtains SAS (shared access signature) token via API

4 - SPA uses SAS to upload appropriated document to blob storage 

5,6 - SPA  save document information to database via API.

Code Example

You can use the upload doc sample or create your own API and front-end using your preferred tech stack.

This sample includes infra code(not complete) and app code (Vue app and API)

Set up Azure services

If you're knowledgeable about Bicep code or interested in learning it, you can use Bicep code found in "infra" folder to deploy Azure services. Of course, there are few aspects you will need to modify or include. :)

The required azure services (sample is below, services name is your choice)

Run locally

Storage API

1. Open project in folder: "upload-doc\app\api"

2. Add configuration for table storage, blob storage and SQL database

3. Run code from your IDE.

Vue App

1. Open Vue project: ".\upload-doc\app\webapp"

2. Change API base URL in the "HttpService.ts" file

3. Run: npm install

4. Run: npm run dev

Deploy to Azure services

1. Deploy API to Azure App Service created in previous step.

2. Check the API

3. Deploy the Vue app to Static Web App created in previous step.

4. Check the application

Ultimately, you are aware of how to integrate Azure Storage, Azure App Service, Azure SQL Database, and Static Web App for your own objectives.

Over to you

When should we use these services?