Laravel mix generates relative paths

Question

On production, to load my assets I use for example:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">

and expect to see when compiled:

<link href="https://example.com/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">

However I am just seeing the relative path:

<link href="/css/app.083fd04ba374238b03b23e742c997718.css" rel="stylesheet">

webpack.mix.js:

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .sass('resources/assets/sass/print.scss', 'public/css')
  .copy([
    'node_modules/bootstrap-sass/assets/fonts/bootstrap',
    'node_modules/font-awesome/fonts',
  ], 'public/fonts')
  .sourceMaps();

if (mix.config.inProduction) {
  mix
    .version()
    .disableNotifications();
} else {
    //
}

On latest version of Laravel (5.4.21). Using nginx, forcing https on Ubuntu 16.04. No idea why the paths are not full, but relative.

EDIT: I am also seeing the same behavior locally if I try to use mix vs asset, without https. Protocol seems not matter here actually.

Solution 1

If you check out the source, that is how it is designed to work. You could always write your own helper.

You need to add this to a helpers file.

use Illuminate\Support\Str;
use Illuminate\Support\HtmlString;

if (! function_exists('mixUrl')) {
    /**
     * Get the path to a versioned Mix file.
     *
     * @param  string  $path
     * @param  string  $manifestDirectory
     * @param  string  $baseUrl
     * @return \Illuminate\Support\HtmlString
     *
     * @throws \Exception
     */
    function mixUrl($path, $manifestDirectory = '', $baseUrl = null)
    {
        static $manifest;

        if (! starts_with($path, '/')) {
            $path = "/{$path}";
        }

        if ($manifestDirectory && ! starts_with($manifestDirectory, '/')) {
            $manifestDirectory = "/{$manifestDirectory}";
        }

        if (file_exists(public_path($manifestDirectory.'/hot'))) {
            return new HtmlString("//localhost:8080{$path}");
        }

        if (! $manifest) {
            if (! file_exists($manifestPath = public_path($manifestDirectory.'/mix-manifest.json'))) {
                throw new Exception('The Mix manifest does not exist.');
            }

            $manifest = json_decode(file_get_contents($manifestPath), true);
        }

        if (!is_null($baseUrl)){
            if (strlen($baseUrl) > 1 && Str::endsWith($baseUrl, '/')) {
                $baseUrl = substr($baseUrl, 0, -1);
            }
            return new HtmlString($baseUrl . $manifestDirectory . $manifest[$path]);
        }

        if (! array_key_exists($path, $manifest)) {
            throw new Exception(
                "Unable to locate Mix file: {$path}. Please check your ".
                'webpack.mix.js output paths and try again.'
            );
        }

        return new HtmlString($manifestDirectory.$manifest[$path]);
    }
}

called from blade like

<script src="{{ mixUrl('/css/app.css', '', 'http://example.com') }}"></script>

Solution 2

The best way to handle this is to use the asset() helper to prepend your APP_URL.

<script src="{{ asset(mix('css/app.css')) }}"></script>

Solution 3

The best way is to use asset() helper. But there is another way to handle this by using url() or secure_url() helper

<script src="{{ url(mix('css/app.css')) }}"></script>

or

<script src="{{ secure_url(mix('css/app.css')) }}"></script>

Comments

[bdereta]

You should select @Devon answer - it's the correct answer and much simpler one.

[feeela]

/css/app is an absolute path, not a relative one…

[Jared Eitnier]

Thanks man, this is exactly what I was going to end up doing anyway. Seems kind of odd that this is the functionality but either way I got it working.

[whoacowboy]

Glad it helped! After working with Laravel for a while, once it doesn't make sense I head to the source.

[bgaze]

Works prefectly, no need of custom helper. This should be the accepted answer.