{"id":6061,"date":"2020-04-02T13:56:54","date_gmt":"2020-04-02T13:56:54","guid":{"rendered":"https:\/\/www.softreetechnology.com\/?p=6061"},"modified":"2020-04-02T13:56:54","modified_gmt":"2020-04-02T13:56:54","slug":"configure-spfx-webparts-to-azure-cdn","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/","title":{"rendered":"Configure SPFx Webparts to Azure CDN"},"content":{"rendered":"\n

In\nthis article, I have mentioned all steps on deploying SPFx webparts to Azure\nCDN. It requires some manual steps and some command\nto create the webparts.           <\/em><\/p>\n\n\n\n

SharePoint Framework has provided ootb supports for deploying\nto Azure Storage account.   Please use Azure Storage account to\nmaintain the web parts.<\/em><\/p>\n\n\n\n

For\nthe Users who follow Microsoft\u2019s SharePoint framework, while building the SPFx webpart\nyou get your resource files i.e. CSS, JSON etc. You can deploy these resource files\n<\/em>on one of the below CDN:<\/em><\/em><\/strong><\/p>\n\n\n\n

  1. SharePoint Library in tenant<\/strong><\/li>
  2. Office 365 Public CDN (Content Delivery Network)<\/strong><\/li>
  3. Azure CDN (Content Delivery Network)<\/strong><\/li><\/ol>\n\n\n\n

    Follow the below steps to deploy webpart in Azure CDN:<\/em><\/p>\n\n\n\n

    Create<\/strong> MS Azure Storage Account<\/strong>:<\/strong><\/p>\n\n\n\n

    1. Open MS Azure Portal (<\/em>https:\/\/portal.azure.com<\/em><\/a>) in any browser and Login. <\/em><\/em><\/li>
    2. Click \u201cStorage accounts\u201d.<\/em><\/li>
    3. Click \u201c+Create\u201d and enter all the details for your storage account.<\/em><\/li><\/ol>\n\n\n\n

      Check the following screen shot for all the\nsettings:<\/em><\/p>\n\n\n\n

      \"\"<\/figure><\/div>\n\n\n\n

      4. Fill all the details\ngiven below and click \u201cReview +Create\u201d.<\/em><\/p>\n\n\n\n

      \"\"<\/figure><\/div>\n\n\n\n

      \u00a05. Go to the Resource.<\/em><\/p>\n\n\n\n

      \"\"<\/figure><\/div>\n\n\n\n

      Create BLOB Container<\/strong>:<\/p>\n\n\n\n

      1. Click on \u201cContainers\u201d.<\/em><\/li><\/ol>\n\n\n\n
        \"\"<\/figure><\/div>\n\n\n\n

        2. Select \u201c+ container\u201d<\/em><\/p>\n\n\n\n

        \"\"<\/figure><\/div>\n\n\n\n

        3. Give the details and click \u201cok\u201d.<\/em><\/p>\n\n\n\n

        \"\"<\/figure><\/div>\n\n\n\n

        Storage account access key: <\/strong><\/p>\n\n\n\n

        1. Select <\/em>Access Keys\u00a0in your Containers Settings.<\/em><\/li><\/ol>\n\n\n\n
          \"\"<\/figure><\/div>\n\n\n\n
          \"\"<\/figure><\/div>\n\n\n\n

          2. Copy one of the access key from key1 or key2.<\/em><\/p>\n\n\n\n

          Enable CDN profile:<\/strong><\/p>\n\n\n\n

          1. Under \u201cBlob Service\u201d, select \u201cAzure CDN\u201d.<\/em><\/li><\/ol>\n\n\n\n
            \"\"<\/figure><\/div>\n\n\n\n

            2. Create a new endpoint and Click \u201cCreate\u201d<\/em><\/p>\n\n\n\n

            \"\"<\/figure><\/div>\n\n\n\n

            3. The endpoint list appears like this.<\/em><\/p>\n\n\n\n

            \"\"<\/figure><\/div>\n\n\n\n

            \u00a0\u00a0\u00a0Configure SPFx Solution: <\/strong><\/p>\n\n\n\n

            1. Navigate to SPFx solution folder in command prompt<\/li>
            2. To open the webpart project in Visual Studio Code enter \u201ccode .\u201d <\/li>
            3. Open package-solution.json in the config folder.<\/li>
            4. Set \u201cincludeClientSideAssets\u201d value as false and \u201cskipFeaturedeployment\u201d value as true. <\/li><\/ol>\n\n\n\n
              \"\"<\/figure><\/div>\n\n\n\n
              1. To specify the Azure storage account details open deploy-azure-storage.json from config folder<\/em><\/li>
              2. Update values as below:<\/em><\/li><\/ol>\n\n\n\n
                \"\"<\/figure><\/div>\n\n\n\n

                3. Open write-manifests.json from config folder and update the path<\/em><\/p>\n\n\n\n

                \"\"<\/figure><\/div>\n\n\n\n

                Prepare Solution to deploy:<\/strong><\/p>\n\n\n\n

                1. \u201cgulp bundle –ship\u201d run the command on command prompt . The ship switch denotes distribution.<\/em><\/li>
                2. \u201cgulp deploy-azure-storage\u201d This commands deploy assets such as JavaScript and CSS files to the CDN.<\/em><\/li>
                3. \u201cgulp package-solution –ship\u201d this command create the solution package in the folder.<\/em><\/li><\/ol>\n\n\n\n

                  Deploy package to SharePoint:<\/strong><\/p>\n\n\n\n

                  1. Open SharePoint app catalog, Upload or drag and drop the client-side solution package to the app catalog <\/em><\/li>
                  2. Select on \u201cDeploy\u201d.<\/em><\/li><\/ol>\n\n\n\n
                    \"\"<\/figure><\/div>\n\n\n\n

                    3. Go to your \u201cSite contents\u201d and add your app.<\/em><\/p>\n\n\n\n

                    \"\"<\/figure><\/div>\n\n\n\n

                    4. Edit page and select your webpart on your webpart picker.<\/em><\/p>\n\n\n\n

                    \"\"<\/figure><\/div>\n\n\n\n
                    \"\"<\/figure><\/div>\n\n\n\n

                    Summary:<\/em><\/strong><\/p>\n\n\n\n

                      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.                       <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                    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\u2019s SharePoint framework, while building the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[],"class_list":["post-6061","post","type-post","status-publish","format-standard","hentry","category-office-365"],"yoast_head":"\nConfigure SPFx Webparts to Azure CDN - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Configure SPFx Webparts to Azure CDN - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"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\u2019s SharePoint framework, while building the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-02T13:56:54+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Configure SPFx Webparts to Azure CDN - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/","og_locale":"en_US","og_type":"article","og_title":"Configure SPFx Webparts to Azure CDN - Softree Technology","og_description":"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\u2019s SharePoint framework, while building the […]","og_url":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/","og_site_name":"Softree Technology","article_published_time":"2020-04-02T13:56:54+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Configure SPFx Webparts to Azure CDN","datePublished":"2020-04-02T13:56:54+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/"},"wordCount":396,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2020\/04\/1-1024x493.png","articleSection":["Office 365"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/","url":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/","name":"Configure SPFx Webparts to Azure CDN - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2020\/04\/1-1024x493.png","datePublished":"2020-04-02T13:56:54+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#primaryimage","url":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2020\/04\/1-1024x493.png","contentUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2020\/04\/1-1024x493.png"},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/office-365\/configure-spfx-webparts-to-azure-cdn\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Configure SPFx Webparts to Azure CDN"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=6061"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6061\/revisions"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=6061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=6061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=6061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}