Laravel 5.7 - CSS and JS not loading using URL::asset

Question

I am new in laravel. I setup laravel 5.7 on my local system and put js and css into public folder but when hitting my site url on browser, site is not loading any css and js.

Site structure :

app
bootstrap
config
database
public
 -css
 -js
 -images
resources
 -views
    -includes
    -layouts
    -pages
routes
tests
vendor
index.php
server.php
.env

Note : I have cut .htaccess and index.php files and put these on root to run site without public in path.

Here is how I am calling url : CSS :

{{ URL::asset('css/style.css') }}

JS :

{{ URL::asset('js/query-1.11.1.min.js') }}

When seeing source code, the url looks like this :

http://localhost/mysite/css/style.css

So can anybody help me out from this issue ?

Thanks in advance.

@Ankit If you are still in development mode, I don't see a reason why you hate `public` in the URL? You can make a virtual host on your machine and start coding. When you go live, you can just point your domain to public folder itself. So, you would never get `public` in your domain URL at all. — nice_dev, Dec 12 '18 at 16:20
@vivek_23 Thanks for the suggestion. Now I again put .htaccess and index.php into public folder and now everything is working. Thanks once again. — Ankit, Dec 12 '18 at 16:31
@Ankit Welcome. Now, for security reasons, put all your folders except for `public` folder outside of your `public_html` and edit `public/index.php` with proper path for `$app` etc. — nice_dev, Dec 12 '18 at 16:34

score 6 · Accepted Answer · answered Dec 12 '18 at 16:27

6

The asset() helper prepends the base URL to the path you supply.

The base URL is the location of index.php (in this case: http://localhost/mysite/).

If you don't want index.php inside /public you will need to use public/ inside your asset path, like this:

asset("public/css/style.css")

Same for the js files, I hope you understand.

answered Dec 12 '18 at 16:27

Sagar Gautam

9,049
6
53
84

1

This will work on local development, but not in production when he will remove `public` from url – Clément Baconnier Dec 12 '18 at 16:33
@cbaconnier can you explain further ? please. – Sagar Gautam Dec 12 '18 at 16:36
1

We can assume @Ankit as to browse `localhost/mysite/public` since `index.php` is also in public folder. On production you want to browse `example.com` not `example.com/public` That's why laravel provide multiple way to serve without `public` folder exposed in the url. See my answer – Clément Baconnier Dec 12 '18 at 16:40
@cbaconnier thats good, I'm not too much familiar about production server. But, one thing is whats the problem for the url of the css and js files since there will no public keyword in the route we define in our routes ? – Sagar Gautam Dec 12 '18 at 16:43
2

You point the domain `example.com` to your folder `mysite/public` where the `index.php` is located at. Aside that `asset('public/css/... ');` will generate the url `example.com/public/css/...` but Since your domain **already** point to `public` it will trow a 404 because your assets are in reality at the address `example.com/css/...` – Clément Baconnier Dec 12 '18 at 17:04
@cbaconnier so what will be the line of code in link tag for css? – Y. Joy Ch. Singha Dec 11 '19 at 07:23
@Y.JoyCh.Singha you could test based on the environment, but it would work only on your setup. The [default call](https://github.com/laravel/ui/blob/master/src/Auth/bootstrap-stubs/layouts/app.stub#L20) is `asset('css/app.css')` and I did [an anwser](https://stackoverflow.com/a/53746945/8068675) for this post on how to setup your local environment properly. – Clément Baconnier Dec 11 '19 at 07:37

Clément Baconnier · Answer 2 · 2018-12-12T16:43:50.627

1

You have 3 possibilites

Use a tool like Valet
Use VirtualHost
Or the easiest, use the command php artisan serve in your project and browse http://localhost:8000 see Local Development Server

Edit : I forgot Homestead

edited Dec 12 '18 at 16:43

answered Dec 12 '18 at 16:04

Clément Baconnier

5,718
5
29
55

Udhav Sarvaiya · Answer 3 · 2019-03-07T08:05:12.430

0

FOR JAVASCRIPT :

<script type="text/javascript" src="{{ URL::asset('js/query-1.11.1.min.js') }}"></script>

FOR CSS :

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

NOTE: This will work if your directory structure is like this: /public/css/style.css OR /public/js/query-1.11.1.min.js

edited Mar 07 '19 at 08:05

answered Dec 12 '18 at 15:55

Udhav Sarvaiya

9,380
13
53
64

I tried this but it is not working. Actually I removed the .htaccess and index.php from public folder and put these files on root to run site without public. – Ankit Dec 12 '18 at 15:57
4

You really shouldn't run your site from the root, this exposes your `.env` file – Jerodev Dec 12 '18 at 16:03

score 0 · Answer 4 · edited Dec 12 '18 at 16:25

0

When cut .htaccess and index.php files must give public folder as path. Try with this:

css
{{ URL::asset('public/css/style.css') }}
js
{{ URL::asset('public/js/query-1.11.1.min.js') }}

edited Dec 12 '18 at 16:25

Udhav Sarvaiya

9,380
13
53
64

answered Dec 12 '18 at 16:20

Jasim Juwel

736
8
19

score 0 · Answer 5 · answered Dec 13 '18 at 05:43

you have directly put your css and js so you have to try this assets href="{{ assets('')}}" function.

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

and also js

<script type="text/javascript" src="{{ asset('js/word.js') }}"></script>

score 0 · Answer 6 · answered Aug 27 '21 at 07:43

0

Add new line in .env file

ASSET_URL=public

i fixed this issue this way.

answered Aug 27 '21 at 07:43

pankaj

1
17
36

score -1 · Answer 7 · edited Oct 01 '19 at 11:37

-1

create .htaccess on your root folder and write this:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^localhost$ [NC]
    RewriteRule ^(.*)$ public/$1 [L,NC] 
</IfModule>

edited Oct 01 '19 at 11:37

Dharman

30,962
25
85
135

answered Oct 01 '19 at 11:32

Imam Mubin

294
2
10

Laravel 5.7 - CSS and JS not loading using URL::asset

7 Answers7