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. — mighty_dev
– mighty_dev, Commented Dec 12, 2018 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
– Ankit, Commented Dec 12, 2018 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. — mighty_dev
– mighty_dev, Commented Dec 12, 2018 at 16:34

Sagar Gautam · Accepted Answer · 2018-12-12 16:27:37Z

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, 2018 at 16:27

Sagar Gautam

9,4099 gold badges62 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Clément Baconnier Over a year ago

This will work on local development, but not in production when he will remove public from url

Sagar Gautam Over a year ago

@cbaconnier can you explain further ? please.

Clément Baconnier Over a year ago

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

Sagar Gautam Over a year ago

@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 ?

Clément Baconnier Over a year ago

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 · Accepted Answer · 2018-12-12 16:43:50Z

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, 2018 at 16:43

answered Dec 12, 2018 at 16:04

Clément Baconnier

6,1676 gold badges35 silver badges63 bronze badges

Comments

Udhav Sarvaiya · Accepted Answer · 2018-12-12 16:25:34Z

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, 2018 at 16:25

Udhav Sarvaiya

10.2k13 gold badges60 silver badges68 bronze badges

answered Dec 12, 2018 at 16:20

Jasim Juwel

7661 gold badge9 silver badges19 bronze badges

Comments

dhara gosai · Accepted Answer · 2018-12-13 05:43:12Z

0

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>

answered Dec 13, 2018 at 5:43

dhara gosai

9210 bronze badges

Comments

Udhav Sarvaiya · Accepted Answer · 2019-03-07 08:05:12Z

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 7, 2019 at 8:05

answered Dec 12, 2018 at 15:55

Udhav Sarvaiya

10.2k13 gold badges60 silver badges68 bronze badges

2 Comments

Ankit Over a year ago

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.

Jerodev Over a year ago

You really shouldn't run your site from the root, this exposes your .env file

pankaj · Accepted Answer · 2021-08-27 07:43:02Z

0

Add new line in .env file

ASSET_URL=public

i fixed this issue this way.

answered Aug 27, 2021 at 7:43

pankaj

1,97026 silver badges37 bronze badges

Comments

Dharman · Accepted Answer · 2019-10-01 11:37:34Z

-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 1, 2019 at 11:37

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Oct 1, 2019 at 11:32

Imam Mubin

2942 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

7 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related