In this article, I have mentioned all steps on deploying SPFx webparts to Azure CDN. It requires some manual steps and some command to create the webparts.
SharePoint Framework has provided ootb supports for deploying to Azure Storage account. Please use Azure Storage account to maintain the web parts.
For the Users who follow Microsoft’s SharePoint framework, while building the SPFx webpart you get your resource files i.e. CSS, JSON etc. You can deploy these resource files on one of the below CDN:
Follow the below steps to deploy webpart in Azure CDN:
Create MS Azure Storage Account:
Check the following screen shot for all the settings:
4. Fill all the details given below and click “Review +Create”.
5. Go to the Resource.
Create BLOB Container:
2. Select “+ container”
3. Give the details and click “ok”.
Storage account access key:
2. Copy one of the access key from key1 or key2.
Enable CDN profile:
2. Create a new endpoint and Click “Create”
3. The endpoint list appears like this.
Configure SPFx Solution:
3. Open write-manifests.json from config folder and update the path
Prepare Solution to deploy:
Deploy package to SharePoint:
3. Go to your “Site contents” and add your app.
4. Edit page and select your webpart on your webpart picker.
Azure CDN is inexpensive and easy to configure. Azure CDN (Content Delivery Network) is a global cache option to deploy the SPFx client side webpart but always remember that CDN are public and cannot be secured, so the files shouldn't contain sensitive information.