Hosting static HTML content in SharePoint Online site & Azure

The SharePoint Online experience which you get by default for all the sites you create in the tenant is modern by default. The site pages you create in the modern experience are fast, easy to author and support rich multimedia content. The pages look great on any experience i.e. mobiles, browser, SharePoint App. If you wanted to host static HTML content with JavaScript, CSS, BootStrap on a SharePoint Online site it is not feasible though it was easily doable with Classic SharePoint site. The reason is by default you are not allowed to run custom scripts to change the look & feel & behaviour of the sites for security reason in a Modern SharePoint Online site. But we have control to manage this setting at different levels

  1. Organizational Level
  2. Site Level

On this blog post let’s see how to host static content (HTML, JS, CSS, Images et) by updating the site scripts settings at the site level. At the end I write some options to host Static content in Azure.

Pre-requisite:

  1. Modern SharePoint Communication Site
  2. SharePoint Online Tenant Admin access for executing few PowerShell commands
  3. HTML Content
  4. Access to Azure Subscription as a Contributor to test static content hosting in Azure

Hosting Static content on a SharePoint Online Site:

For sample HTML content I’ve downloaded from the following Azure Sample GitHub repo

https://github.com/Azure-Samples/app-service-web-html-get-started

Step 1:

Connect a SharePoint Online administrator to a SharePoint Online connection. This cmdlet must run before any other SharePoint Online cmdlets can run

Connect-SPOService -Url https://domain-admin.sharepoint.com

Step 2:

Run a Power shell command to disable the property DenyAddAndCustomizePages at the site level by running the following command

Set-SPOsite https://domain.sharepoint.com/sites/sitename -DenyAddAndCustomizePages 0

Step 3:

Verify if DenyAddAndCustomizePages is Disabled. To check this the property value run the following command

Get-SPOSite -Identity https://domain.sharepoint.com/sites/sitename -Detailed | select DenyAddAndCustomizePages

Step 4:

Be ready with the HTML sample. I’ve downloaded static content from the Azure HTML Sample github repo which has

  • HTML
  • CSS
  • JavaScript

If there is any file with HTML extension, rename the extension to .aspx. On this sample there was 1 HTML file by the name index.html, I’ve renamed the file index.html to index.aspx

Step 5:

Open the SharePoint Online Communication site in the browser & navigate to the Document library. I’ve chosen the default document library (Shared Documents) for the storing the HTML, you can also create a custom document library, site assets library.

Upload the folder which has the .HTML file renamed to .aspx and the supporting files (JS, Images, CSS etc)

After the upload

Click the index.aspx file, it should render the file with HTML, CSS, JS etc as shown below

The URL of the HTML page will be in the following structure for the index.aspx file

https://domain.sharepoint.com/sites/sitename/Shared Documents/HTML_sample_for_Azure_App_Service/index.aspx

Step 6:

You can now Enable the property DenyAddAndCustomizePages by executing the following SharePoint Online PowerShell cmdlet

Set-SPOsite https://domain.sharepoint.com/sites/sitename -DenyAddAndCustomizePages 1

If you wanted to add another HTML file after the above command, you will have to disable the property DenyAddAndCustomizePages before adding the HTML file. I’ve shown you how to host static HTML on SharePoint Online site which will not cost you anything provided there is Microsoft 365 license. If you need additional features like Custom domain, anonymous access, deployments etc you can do so with Azure.

Static Content in Azure:

There are couple of options in Azure to host your HTML as shown below

  1. Azure App service
    • You can create an App service in Azure to host your static HTML. There is Microsoft documentation with detailed instruction to set this up. You can lot of options with App service like Auto scaling, Custom domain, Anonymous access, auto deployments etc. There is also a Free pricing tier F1 for hosting your content.
  2. Azure Static Webapps
    • As of now the service is in Preview mode which automatically builds and deploys full stack webapps to Azure from Github repository. During preview, its free of cost. I’ve recently tested this, if you wanted to try go through this documentation.
    • VS Code extension for Static Webapps
    • You can also serve dynamic content with Azure functions integration.
  3. Azure Storage
    • This service also has capability to serve static content (HTML, CSS, JS & image) from the blob container. To know more, check this documentation from Microsoft.

Summary: On this post we have seen options to host static content in SharePoint Online site & Azure. Based on your requirement (Anonymous access, custom domain, cost etc) you can choose one from the options given above. Hope you have found this informational & helpful in some way. If there is some other option to host static content, please let me know on the comment section below

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s