How to configure Kirby to allow for mobile css testing

Hi there,

I have managed to get a version of my Kirby site showing up on my mobile using the local network by running ‘php -S 0.0.0.0:8888’ but my css isn’t linking properly. I assume this is because Kirby is still trying to use the localhost files. Can someone advise me how I can change the root url to be able to access the css from the local network. If I got to 0.0.0.0:8888/index.css I can see the file, so I think it must just be a case of tweaking the config to direct to the right location.

Cheers,
Tim

Usually, Kirby picks up the right URL unless maybe you have somewhere configured a fixed URL, e.g. via the c::set('url')setting.

I havent configured anything to do with the URL. It works fine on my local machine and fine when its deployed to a test server. The issue comes when I’m trying to access it over the local network on a mobile where it is trying to access “localhost” on the mobile rather than the data that is being passed through the network. Does that makes sense?

That is weird, so changing the URL doesn’t seem to make any difference.

Do you use the built-in server even for localhost or just firing it up for the mobile?

I’m not sure what you mean sorry. I’m accessing it on my phone using my ‘myComputerIP:port’ and it works but the css is not found. If I got to ‘myComputerIP:port/assets/css/index.css’ I can view the file. I can only assume the css file is being searched for on the wrong root?

Do you have another computer or a laptop that you can try from? Im wondering what the paths to CSS files (and other assets) look like, and for that you need to be able to do a view source. You can remote debug iPhone Safari from your desktop and see what your phone is seeing.

Do images show up? does javascript work?

Are you linking to the CSS manually or using Kirbys helper?

If you are on an iPhone, you could install an app (View Source) that allows you to view the source code to check if the generated URL is correct. Guess something similar exists for Android phones unless it’s not needed there.

Hi!

So those comments helped me figure it out. I had used the Kirby css helpers and that was adding an incorrect root to the link tag - which wasn’t working so I changed it to a normal link tag and now its working across the network. Using another computer was a good call! Thanks!

Tim

That is really strange, because it is the whole purpose of the helpers to make the links working on any domain and to this day, it has always worked reliably.

I think the issue is that the server is running on a local machine and kirby sets those helpers on startup to be the '0.0.0.0:888" or whatever it may be - so if you then access that version on another device on the same network it is still set to localhost - however the localhost is no longer that of the device it is running on but instead it is the localhost of the external machine.

I dont think it is an error as such, just a loophole in the helper code.

Well, I don’t know. I usually access my websites which are served by Apache in the desktop browser via localhost and on phones in the network via my notebooks IP, all without issues until now. Maybe it has to do with the built-in server you are firing up, I use Mamp.

@Timothy-Tolley You could try mapping your ip address to a local domain name in your hosts file. That way Kirby is working off a domain name rather then an IP. Just map something like myserver.test to your ip address and port number. Flush your DNS after setting it or reboot your machine so that rule kicks in. You need to set this on your router as well, so that it routes other computers on your network.

Alternatively, as @texnixe suggests use a more fully fledged server like Mamp or personally I use Valet+ and Laraval Mix which includes browsersync. I can access from other machines through browsersync.

Another way is to use something like Ngrok, but thats probably a little heavy for what you want to do.

Hi there - thought I would give my own solution to this for those interested, I used browsersync as it allows for auto updated to CSS etc and makes it really easy to make these changes in real time.

Thanks for all the advice and suggestions

Tim