Shopware CDN integration

Introduction

A Shopware CDN integration can deliver product media, compiled theme files, JavaScript, and public extension assets from edge servers closer to visitors. Shopware continues to generate storefront pages and process dynamic requests at the origin while browsers request static files through the CDN Service Domain.

This guide shows how to configure Shopware's native filesystem adapters to use your CDN Service Domain. The procedure was tested with Shopware 6.7.13.0.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to configure a CDN in Shopware 6

  1. Log in to Shopware Administration.
    Shopware Administration login page
  2. Open config/packages/shopware.yaml in the Shopware project. Add filesystem adapters for public, theme, and asset, using the complete HTTPS URL of your CDN Service Domain for each url value. Do not add a trailing slash. 
    shopware:
    filesystem:
        public:
            type: local
            url: 'https://barsoom-cdn.cdnsun.org'
            visibility: public
            config:
                root: '%kernel.project_dir%/public'
        theme:
            type: local
            url: 'https://barsoom-cdn.cdnsun.org'
            visibility: public
            config:
                root: '%kernel.project_dir%/public'
        asset:
            type: local
            url: 'https://barsoom-cdn.cdnsun.org'
            visibility: public
            config:
                root: '%kernel.project_dir%/public'

    If the file already contains a shopware: section, merge the filesystem: section into it instead of creating a second top-level key. The public adapter generates URLs for media, theme covers compiled storefront CSS and JavaScript, and asset covers public bundle and extension files.

  3. From the Shopware project directory, install public bundle assets, compile the storefront theme, and clear the production cache: 
    php bin/console assets:install
php bin/console theme:compile
php bin/console cache:clear

    Run the commands as the operating-system user that owns the Shopware files. Run theme:compile again after changing or deploying a storefront theme.

  4. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled Shopware storefront loading product media theme files and bundle assets through the CDN

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

 __   _      ___     __   __  
| || | ||   / _ \\   \ \\/ // 
| '--' ||  / //\ \\   \   //  
| .--. || |  ___  ||  / . \\  
|_|| |_|| |_||  |_|| /_//\_\\ 
`-`  `-`  `-`   `-`  `-`  --`