Title: Deploy SPFx WebParts To Azure CDN
Description: Some times we need to keep the files under Azure CDN instead of Site assets or library or O365 CDN.
Step1. Azure team creates and provide the CDN path to you. ex:http://lakku.azureedge.net/fci/bhagya
Step2: Update Azure storage account details to SPFX Solution
Open deploy-azure-storage.json from config folder to specify the Azure storage account details
Update values as below,
account - storage account name
container - BLOB container
accessKey - storage account access key (primary or secondary)
Step3: update azure CDN path in write-manifests.json from config folder
Step4: Make sure to give includeClientSideAssets as false in package-solution.json so that client-side files not packaged in .sppkg file. this files should go to external CDN.
Step5: Run below command . this command is used to bundle all typescript files and node_module dependents into a single js file
>gulp bundle --ship
Step 6: Deploy assets to Azure Storage
>gulp deploy-azure-storage
This will deploy the assets (js, CSS files) to Azure CDN. Azure Location: which you mention in write-manifests.json from config folder
Note: if you want to place files manually in Azure, find the ftp path in azure and place the files using FileZilla or windows explorer. Alo Step2 not require follow for manual place files. Step7:gulp package-solution --ship
Outcome: file will generate in below location
Description: Some times we need to keep the files under Azure CDN instead of Site assets or library or O365 CDN.
Step1. Azure team creates and provide the CDN path to you. ex:http://lakku.azureedge.net/fci/bhagya
Step2: Update Azure storage account details to SPFX Solution
Open deploy-azure-storage.json from config folder to specify the Azure storage account details
Update values as below,
account - storage account name
container - BLOB container
accessKey - storage account access key (primary or secondary)
Step3: update azure CDN path in write-manifests.json from config folder
Step4: Make sure to give includeClientSideAssets as false in package-solution.json so that client-side files not packaged in .sppkg file. this files should go to external CDN.
Step5: Run below command . this command is used to bundle all typescript files and node_module dependents into a single js file
>gulp bundle --ship
Step 6: Deploy assets to Azure Storage
>gulp deploy-azure-storage
This will deploy the assets (js, CSS files) to Azure CDN. Azure Location: which you mention in write-manifests.json from config folder
Note: if you want to place files manually in Azure, find the ftp path in azure and place the files using FileZilla or windows explorer. Alo Step2 not require follow for manual place files. Step7:gulp package-solution --ship
Step8:upload .sppkg file into appcatalog site and active.
Note: if you are using azure CDN. it should show Azure url in popup window while activate.
you should access appcatalog site in order to upload .sppkg file.
Step9: go to modern page and add webpart.
Note: if you want to adde the webpart in clasix page, go to webpart and go to other option and find the spfx webpart.
Note: if you are using azure CDN. it should show Azure url in popup window while activate.
you should access appcatalog site in order to upload .sppkg file.
Step9: go to modern page and add webpart.
Note: if you want to adde the webpart in clasix page, go to webpart and go to other option and find the spfx webpart.
