Relative url in css stylesheets point to localhost on external machine

sage
,
1

Hey there,

i’m using sage 9.0.0-beta.3 (from packagist) with browsersync. In my stylesheet i’m using relative urls to point to images. So for example:

background-image: url(../images/example.min.svg);

This works fine on my local machine, but when i access the page on a different machine via the external url (e.g. 192.168.0.100), the images are not found.
That is because the url still points to http://localhost:3000/app/themes/example-theme/dist/images/example.min.svg, instead of http://192.168.0.100:3000/app/themes/example-theme/dist/images/example.min.svg

Any ideas how i could fix this?

Thanks a lot!

2

You have to change the hostname/domain in WordPress database, you can use a plugin like this one (it also offers a simpler domain replace feature):


Don’t forget to backup your database first!

3

Thank you for your answer!
Unfortunately that’s not really an option, because i would have to migrate my database everytime my ip changes?!
And that happens every time i’m on a new network (which is quite often…).

Also, i’m not sure if this is the issue here, because my database actually points to my local dev url, which is e.g. http://example-project.dev and not to the one browsersync gives me.

4

A hostname would indeed solve the issue with changing IP addresses.

The localhost hostname must be still (incorrectly) somewhere in the WordPress database -
you would have to replace it with your permanent dev hostname.

Once this has been fixed there shouldn’t be any need for further changes until deployment to staging/production. Then a transfer tool can be handy:
https://roots.io/leveraging-wp-cli-aliases-in-your-wordpress-development-workflow/

5

Thanks again for your answer, especially the wp cli script themes quite handy.

But i don’t think WordPress is the issue here (surprisingly enough, since it likes to mess with urls so much…).

When i build to production the urls in my stylesheet are correctly referenced relatively (so with ../images/example.min.svg), but during development the blob of css that is inserted by webpack actually hard codes the absolute url

background-image: url(http://localhost:3000/app/themes/example-theme/dist/images/example.min.svg);

which obviously cannot work on external machines… I feel like there is something wrong with my webpack or browsersync config.

Anything i can do about that?

6

For Sage 9 the config file is located under
resources/assets/config.json,
option fields devUrl and proxyUrl.

7

Ah thank you!
If i change the proxyUrl there to my ip address, instead of localhost:3000 the urls are indeed correct!

Although this does mean that i have to change the proxyUrl every time my ip changes, which is kind of annoying… I wonder if webpack could just leave the relative urls in stylesheets untouched?

8

Why not use the hostname instead of the (chaning) IP address (for proxyUrl)?

9

Because the hostname does only resolve on my local machine. For external machines, i think i would have to set up a local dns server.