Integration of Website created using AEM Quick Site Feature with External CDN

[rkmk107]

In Sites created using Quick Site the Theme JS and CSS is rendered/loaded in HTML from Domain:
https://static-pxxxxx-eyyyyy.adobeaemcloud.com/

For e.g.:

If my website is using domain www.sample-domain.com (external CDN based) (e.g. website url: https://www.sample-domain.com/content/quicksite/en/home.html). 
Is there any way to load the theme JS and CSS files in HTML using CDN domain:

For e.g.

<link as="style" href="https://www.sample-domain.com/e443df3ed38fbc9835ac2c8d70cd7222e42468745ab08f85dc4a851c31a09e07/theme..." rel="preload stylesheet" type="text/css">
<script src="https://www.sample-domain.com/e443df3ed38fbc9835ac2c8d70cd7222e42468745ab08f85dc4a851c31a09e07/theme..." async type="text/javascript"></script>
<link href="https://www.sample-domain.com/e443df3ed38fbc9835ac2c8d70cd7222e42468745ab08f85dc4a851c31a09e07/resou..." rel="icon" type="image/png">


We do not want to expose the AEM static domain in html. Kindly help.
Is there any solution for this?

[pulkitvashisth]

Here are steps that you can follow to load the theme JS and CSS files in HTML using your CDN domain instead of the AEM static domain : 

1. Download the Theme Sources: Download the theme sources from AEM and open them using a local IDE.
   https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

2. Modify the Theme Sources: Modify the theme sources to reference your CDN domain instead of the AEM static domain. 

3. Use a Proxy Server: Use a proxy server to preview CSS and JavaScript changes in real time.

4. Deploy the Theme Updates: Deploy the theme updates to an AEM Site using Adobe Cloud Manager’s Front End Pipeline.

5. Update the HTML: Update the HTML to load the JS and CSS files from your CDN domain2. For example, replace the href and src attributes in your <link> and <script> tags with the URLs of the JS and CSS files on your CDN domain.
   https://stackoverflow.com/questions/71810104/is-there-a-way-to-load-internally-downloaded-js-and-css...

[rkmk107]

Hi @pulkitvashisth ,

Could you please elaborate on Step2, did not understand clearly.

Also Can External CDN/Customer managed CDN point to Static CDN url: <https://static-pxxxxx-eyyyyy.adobeaemcloud.com/> , like we can do we do with <https://publish-pxxxxx-eyyyyy.adobeaemcloud.com/>  : https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/conten...

We want external cdn to proxy the static domain and then include the cdn based js script and css urls in HTML.

[pulkitvashisth · Accepted solution]

In step2, you need to open the theme source files in an IDE, find references to the AEM static domain in the CSS and JS files, and replace these with URLs from your CDN. After making changes, test them to ensure the files are correctly loaded from the CDN. Always follow best practices for change management and testing.

In context to second question : yes, an External CDN or Customer Managed CDN can point to a Static CDN URL. The process involves configuring the CDN to cache assets from the static domain and serve them from its own servers.
Here is reference for the same : https://www.digitalocean.com/community/tutorials/using-a-cdn-to-speed-up-static-content-delivery Here’s a simplified version of the process:

1. Provide the CDN with your origin server’s address.
2. Rewrite links to static assets: The links should now point to the URL provided by the CDN. From that point onwards, the CDN will handle your users’ incoming asset requests and serve content from its geographically distributed caches and your origin as appropriate.
3. Use the CDN to proxy the static domain: The CDN can cache assets from the static domain and serve them from its own servers. This allows geographically dispersed users to minimize the number of hops needed to receive static content.

I have personally not implemented but these should work.