Move the assets folder in Angular to Azure Storage

Looking to streamline my Angular application by transferring all the assets to Azure Storage.

Rationale: The assets folder in my repository is cluttered with large, static files that never change.

Since we are hosted on Azure, the plan is to move the assets folder to Azure Storage.

However, the Azure Storage folder cannot be made public. Access needs to be restricted similar to:

https://i.stack.imgur.com/QJHuC.png

Struggling to figure out how to configure Angular to utilize this protected storage.

Any suggestions or guidance would be highly appreciated.

Answer â„–1

To secure your Storage account, set up a private endpoint within the Networking section.

When creating the endpoint, make sure to choose "blob" as the target sub-source. Select your virtual network and subnet accordingly.

https://i.stack.imgur.com/YiRWg.png

If your application is hosted on an Azure web app, integrate it with VNet. Ensure that your app plan is S1 or higher for VNet integration.

In the networking section of your web app, enable VNet integration for outbound traffic. Add your VNet and subnet information.

https://i.stack.imgur.com/Gwjac.png

If your application is hosted on a VM, you can also integrate it with your VNet.

This setup will allow your angular application to securely access your protected storage through the private endpoint.

For more information, please refer to:

https://learn.microsoft.com/en-us/azure/storage/common/storage-private-endpoints https://learn.microsoft.com/en-us/azure/app-service/web-sites-integrate-with-vnet

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There seems to be a malfunction with the routing feature in the src/index.html file

My routing setup is not functioning as expected in src/index.html angular. What I have is a header with some links for navigation: <header> <div class="logo"> <div class="logo-img-div"> <img src="../../ass ...

Looking for guidance on implementing explicit waits in Protractor for non-angular applications

I have noticed that automating non-angular applications with Protractor can be challenging. Currently, I am using some methods to add an explicit wait to my existing Serenity click and enter functions. However, I am curious if there is a way to automatic ...

What is the definition of reusable components within the context of Angular, React, and Vue?

I've been hearing a lot about reusable components. What does this actually mean? For instance, if I want to showcase basic user information like ID, name, age, etc. Does it imply that the component is "plug and play," where you simply write the sele ...

Guide to testing template-driven forms in Angular 6

Currently, I am working on a template-driven form which looks like this: <form #form="ngForm" (ngSubmit)="onSubmit()"> <input class="form-control input-lg" id="venue_name" name="venue_name" type="text" #venue_name="ngModel" [(n ...

Connect store variables to components using Angular's ngrx

I am attempting to link the location variable in my component to another variable in the store using a selector with ngrx v13 in Angular. However, when I include the variable with the property in the HTML, I encounter an error: Error message: Property &ap ...

Angular displays the error message TS2339, stating that the property 'handleError' is not found on the 'HeroService' type

Hey everyone, I know there are already a few questions out there about Typescript compilation errors, but I'm facing a unique challenge that I can't quite figure out. I'm currently working on the Angular Tour of Heroes app and trying to com ...

Issues with the typings for the toPromise function in WebStorm have been identified

I'm encountering an issue with WebStorm not recognizing the typings for the toPromise function on 'rxjs', despite having updated it. Is there a way I can troubleshoot this and fix it? Strangely, the code still runs successfully despite the ...

Conceal or remove disabled years in Angular Material datepicker

I previously disabled years prior to 2018, but now I would like to hide or delete them. The year selection range currently starts from 1998, but it should begin at 2018 instead. Is there a way to display only 3-4 years instead of the current 24-year rang ...

Challenges with Typescript Integration in Visual Studio 2013

Currently diving into typescript as a newbie while going through the Angular tutorial using Visual Studio 2013 for work, which is also new to me. The frustrating part is that Visual Studio seems to be assuming I am going to use a different language (judgin ...

Experience the magic of live streaming with our cutting-edge technology bundle featuring RTSP streaming, AspNet 5 API integration, FFM

Description: I am working on an API (ASP.Net 5) that connects to an IP Camera through RTSP. The camera sends a h264 stream converted with ffmpeg as an m3u8 stream, which is then returned to the Angular client in the following manner: public async Task< ...

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

Angular Jasmine Test: Anticipated the invoked spy to have been executed

Examining a confirmation dialog in Angular 8 has led to an interesting discovery: one test passes while others fail, even though they are quite similar. The tests being conducted are for three statuses: Approve, Reject, and Reset. Interestingly, the test f ...

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Encountered an error while creating an Angular 2 application. I followed the instructions from this link to create a sample application. Upon running npm start Received the following error, events.js:154 throw er; // Unhandled 'error' even ...

Error: Attempting to access the property 'cinemaName' of an undefined object

I am brand new to using angular2 and higher. My form definition with an input field of type text looks like this: <form class="form-horizontal" name="form" role="form"> <div class="form-group"> <label class="col-md-3 co ...

The "export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core" error occurred during the Angular build

Trying to set up an Angular application with clarity UI. Using Angular version 10.1.1 and after adding clarity, encountering build errors. ERROR in ./node_modules/@clr/angular/esm2015/utils/animations/expandable-animation/expandable-animation.js 33:8-43 &q ...

What is the process for adjusting the color of a mat-divider?

Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...

Setting up Node on a Ubuntu system

Currently, I am in the process of installing Node.js to run my Angular2 program. However, I encountered an error during the installation: npm WARN npm npm does not support Node.js v0.10.25 npm WARN npm You should probably upgrade to a newer version of nod ...

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

Can one mimic a TypeScript decorator?

Assuming I have a method decorator like this: class Service { @LogCall() doSomething() { return 1 + 1; } } Is there a way to simulate mocking the @LogCall decorator in unit tests, either by preventing it from being applied or by a ...