DDEV Share not loading images or CSS on Craft CMS

Question

I am trying to use the Ddev share command to view my local Craft sites on seperate devices using the ddev share command.

The share url is working however my site is only loading the html and not images or css (these appear to be using the my-site.ddev.site url which is my local version.

I have set up an Ngrok account per the ddev docs and added my authentication token.

Note my CSS is loading via the vite.js Craft plugin.

Any ideas on what I should try to get these assets working?

Answer 1

I was able to get this working using Craft aliases.

My work around for the images issue required me to use the Craft alias function in my twig html

<img src="{{ alias('@web/dist/images/my-image.svg') }}" alt="My Image">

And as the CSS was loaded with the Vite.js plugin I again had to use the web alias to point to the dynamic url in the vite config file…

/config/vite.php

<?php

use craft\helpers\App;

return [
   'checkDevServer' => true,
   'devServerInternal' => 'http://localhost:3000',
   'devServerPublic' => Craft::getAlias('@web') . ':3000',
   'errorEntry' => 'src/js/app.js',
   'serverPublic' => Craft::getAlias('@web')  . '/dist/',
   'useDevServer' => App::env('ENVIRONMENT') === 'dev' || App::env('CRAFT_ENVIRONMENT') === 'dev',
   'manifestPath' => Craft::getAlias('@webroot') . '/dist/manifest.json',
   // other config settings...
];