Laravel Elixir wrong paths

Question

This is my gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.less([
       'style.less'
    ], 'public/css/style.css')
        .styles([
       'reset.css',
       'font-awesome.min.css',
       'style.css'
    ], 'public/css/app.css', 'public/css')
    .scripts(['jquery-1.12.0.min.js', 'main.js'], 'public/js/app.js', 'resources/assets/scripts')
    .version(['css/app.css', 'js/app.js']); 
});

As result I get files

public/build/app-2a14246111.css
public/build/app-7790e07dfb.js
public/build/rev-manifest.json

but when I try to add css and js files to layout

<link rel="stylesheet" href="{{ elixir("css/app.css") }}">    
<script src="{{ elixir("js/app.js") }}"></script> 

I get

<link rel="stylesheet" href="/build/css/app-2a14246111.css">
<script src="/build/js/app-7790e07dfb.js"></script>

and browser can't find them because it tries to find

http://localhost:8080/build/css/app-2a14246111.css
http://localhost:8080/build/js/app-7790e07dfb.js

and project folder name and public folder are missed somehow in paths. How to fix it?

Actually I see, I can add dot in paths like

<link rel="stylesheet" href=".{{ elixir("css/app.css") }}">
<script src=".{{ elixir("js/app.js") }}"></script>

and then all will work, but I don't like this kind of fix.

Answer 1

That's because you're running the Laravel project on localhost. When you deploy the project to a server, the problem resolves itself (assuming it's configured correctly).

If you're using Apache, you can add a Virtual Host configuration so that instead of http://localhost:8080/laravel/public you can use something like http://domain-name.app:

<VirtualHost *:80>   
    DocumentRoot "C:\Users\username\path\to\laravel\public" 
    ServerName domain-name.app
</VirtualHost>

And then in your hosts file add:

127.0.0.1   domain-name.app

This way, you can link to absolute paths in your HTML like /css/somefile.css instead of ./css/somefile.css.

Checkout Homestead, from Laravel, it helps to avoid a lot of pain in the ass.

Answer 2

FWIW... you can also wrap the elixir tags with URL::asset like this:

<link href="{{ URL::asset(elixir('css/app.css')) }}" rel="stylesheet">

That solved my issue and still allowed me to run on port 8888.