Why I can't obtain the complete path of a CSS resource in a blade template?

0
votes

I am very new in Laravel. I am working on a Laravel 5.4 application and I have the following problem using blade to retrieve the comple URL of a CSS resource.

This is my app.blade.php file representing the template of all my views:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link href="/css/app.css" rel="stylesheet">-->
    <!--<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >-->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="/js/app.js"></script>
</head>
<body>

    <div class="container" style="width: 60%; margin-bottom: 50px;">
        @yield('content')
    </div>

    @yield('footer')

</body>
</html>

As you can see, folloing this SO post: Laravel 5 not finding css files

I am defining this CSS resource in this way:

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

to retrieve the http://localhost/HotelRegistration/public/css/app.css resource from the correct place.

The problem is that doing in this way opening an URL like http://localhost/HotelRegistration/public/registration

I still obtain the wrong CSS link in the generated page, this one:

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

Doing in this way I expected to obtain the correct one http://localhost/HotelRegistration/public/css/app.css

I also tried to import it using this alternative link:

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

but I am obtaining the same results.

What is wrong? What am I missing? How can I fix this issue and obtain the correct url of my CSS including the entire path?

3
phplaravellaravel-5bladelaravel-5.4
to work with Laravel you should use Virtual Host but not localhost – lubart
@lubart I know but what happens if I have to put in on a remote server and there is not yet a domain? – AndreaNobili
remote server always has IP address at least... you also should set up a webserver there – lubart
@lubart yes I will access to an address as: MY_IP/MYWEBSITE. But I think that doing in thiw way I will have the problem that opening an URL like MY_IP/MYWEBSITE/HotelRegistration/public/registration my CSS files still not work – AndreaNobili
I suppose it is origin of your problem, url should be like YOUR_IP/registration, not MY_IP/MYWEBSITE/public/registration and Directory on webserver set as MYWEBSITE/public. But if for some reason you cannot control webserver, you can use redirection in .htaccess, just use rewrite mod – lubart

3 Answers

2
votes

First, it is a good idea to use artisan serve:

php artisan serve

This will reduces a lot of headaches. If you are on a Mac, try valet. It is really nice and light.

Second you need to import css in following manner:

<link href="{!! asset('css/app.css') !!}" rel="stylesheet" type="text/css" >

I hope this solves your problem.

0
votes

Use a virtual host in apache config files your root is the public dir not your localhost root (replace YOUR_LOCALHOST_ROOT_PATH of course) :

<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot YOUR_LOCALHOST_ROOT_PATH/HotelRegistration/public
ServerName hotel.dev
<Directory "YOUR_LOCALHOST_ROOT_PATH/HotelRegistration/public">
      AllowOverride All
      Require all granted
</Directory>

Of course hotel.dev does not exist on the internet, no problem, use your system host file ! In your host file (on windows : C:/Windows/System32/drivers/etc/host , linux /etc/host ) add this line :

127.0.0.1 hotel.dev

you can add more line too :

127.0.0.1 hotel.dev another.dev youtestsite.dev

Restart your browser and apache it should work immediatly

And use http://hotel.dev

You should not have any path problem after that !

-1
votes

If you work on your localhost, you should run command line from your directory root project (e.g.: HotelRegistration/) :

php artisan serve

By default you will can access your project with url: http://127.0.0.1:8000/ and you css link will look like http://127.0.0.1:8000/css/app.css

If you want to host on your remote server, you can use .htaccess rewrite mode redirect to index.php of public directory.