Incorrect domain when loading JS assets in multisite

I started a fresh WP multisite project that has two themes - both built with Sage. The website project uses Bedrock and the “Multisite URL fixer” mu-plugin has been installed.

I have two sites in my local environment:

  1. mysite dot local
  2. anothersite.mysite dot local

The primary site works fine - no issues there. On the non-primary site, that is located in subdomain, there is an issue loading JavaScript assets with:

@vite(['resources/css/app.css', 'resources/js/app.js'])

CSS is loading fine, but JS-file is being loaded from the primary website’s domain when building assets with Vite’s build. When Hot module loading (dev mode) is running, JS is being loaded as should be.

I found out that the environment variable WP_HOME in project’s root folder is used to form the host/domain for JS assets url. If I change it to be my subdomain, JS is loading properly. But naturally this isn’t the solution, since the primary site will stop working.

In Sage theme and Laravel, how can I tell the app to load JS files using the subdomain instead of the primary domain?

In your theme’s application.php file try changing your WP_HOME and WP_SITEURL values to look like the following:

Config::define( 'WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);
Config::define( 'WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);

This should force Sage to load your assets from the same domain as the site you’re currently on, rather than relying on what is set in your .env file, which doesn’t always work for multisites.

For more info, you can check out this tutorial on installing WordPress Multisite with Sage.

1 Like

Thanks for the tip.

To be honest, I feel little uncomfortable to set these variables with such a “dynamic method”. I believe there may be some security issues with this?

But after testing this in my local environment, your suggested method does indeed work. So for now I will use this.

1 Like