SPFx CSS and Assets loaded from Azure Storage Account CDN
Tutorial on how to create Azure Storage Account CDN with hosted css files and load the css in SPFx (SharePoint Framework) React webpart .
Prerequisites
- Azure subscription
Create Storage Account
- Open the Azure Portal.
- Hit the Plus sign (New button) on the top left menu.
- Find Storage -> Storage account - blob, file, table, queue.
- Create Storage account be adding all the details.
- I have called mine velinstoragecdn and also created new resource group named velinstoragecdnARM to host it.
- Consider the Replication options, because the price vary depending on that. For the blog I have picked the cheapest "Locally-redundant storage (LRS)".
Create Blob Container
- Once the Azure storage account is created, access it and navigate to the Blob section in the blade.
- Click on the Containers and create new container to host the assets.
- I called mine spfx assets and it is from type Container.
- Upload one asset to the container so it can be tested later.
- Select the container -> Find the Upload option -> Upload CSS file.
Create Storage Account CDN
- Under the Storage Account Settings find -> Blob Service -> Azure CDN
- Create new endpoint
- Copy the url enpoint, the blob container name and the uploaded asset name so url can with this format be constructed:
https://<CDN_path>/<BLOB_Container_name>/<CSS_file_with_extension>In my example the url looks like this
https://velincdn.azureedge.net/spfxassets/vendor.cssLoad the CSS in SPFx webpart
- Add reference to the SPComponentLoader in the webpart ts file.
import { SPComponentLoader } from '@microsoft/sp-loader';- Load the scripts in the constructor of the SPFx webpart:
export default class ReactWebPart extends BaseClientSideWebPart<IReactWebPartProps> {
public constructor(context: IWebPartContext) {
super();
SPComponentLoader.loadCss("https://velincdn.azureedge.net/spfxassets/vendor.css");
}
...The css classes can now be used in the webpart.
Enable CORS for extra security
- Add origins for your tenant domains only for extra security.
- Find the Blob CORS options under -> Storage Account Settings -> Blob Service -> CORS
- Add your domain rules there
