I am using laravel 5.2 and I have problem with the assets url , I do not manage to call css to or js links
<script src="{{ URL::asset('/js/jquery.min.js') }}"></script>
or
<script src="{{ asset('/js/jquery.min.js') }}"></script>
the url in html is: http://localhost/site/js/...js.
I have tried to add public but still not working
got
NotFoundHttpException in RouteCollection.php line 161:
honestly, just try it like this,
<link href="/css/app.css" rel="stylesheet">
The / at the start of the address will asume you are at starting from the root of your server, which is the public directory.
Change /vendor/laravel/framework/src/Illuminate/Foundation/helpers.php/asset() function as follows:
function asset($path, $secure = null)
{
return app('url')->asset("public/".$path, $secure);
}
Change <script src="{{ URL::asset('/js/jquery.min.js') }}"></script>
to
<script src="{{ URL::asset('js/jquery.min.js') }}"></script>
Notice the / before js, possibly the reason why your css and js links are not working.
Do same on the css as well.
Do:
php artisan config: clear
php artisan cache: clear
delete public/css and public/js
gulp
try it again
you have to put your css, js, images etc in the public folder. The root of the asset method is the public folder so if you have a public/css/style.css file, you can get its path by using asset('css/style.css').
The asset folder is for storing less or sass files which have to be compiled into a css file.
This is duplicate question. you can find my answer here also:
Why I can't obtain the complete path of a CSS resource in a blade template?
Do you see default laravel js and css files in resources folder? put your files there. I found this place the most convenient one.
You can load them in your blade like this:
<link href="{!! asset('css/app.css') !!}" rel="stylesheet" type="text/css" >
if you are still facing problem try to run this on you project folder first and then try:
php artisan serve
I hope it work for you. Any question just let me know.
Changing the Node version from 15.* to 12.13.0 helped me to install node modules & then I did gulp & now everything works smooth!! yeah!!
Related
I am new in laravel and i want to include css and js from public folder using this
<link href={{ URL::asset('css/a.css') }} rel="stylesheet">
But it is not working for me . public folder contains the assets folder in which i have css and js files with is code
h1{
color:darkgreen;
}
I want just css and js files include in blade files . So i have created one folder inside public folder and include using this code
<link href={{ URL::asset('css/a.css') }} rel="stylesheet">
But i am not able see effect of this css and js in blade file so please help me for include css and js file in blade file
You must use laravel mix method to link css and js files.
After you build your scss/less and js files with version() which will help you for cache busting and .sourceMaps() for sourcemap (Development).
code sample:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/manage/scss/app.scss' , 'public/css/app-temp.css')
.sourceMaps()
.version();
Example :
<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}" />
<script src="{{ mix('js/app.js') }}"></script>
This will generate the full css link with random hash no which handled by laravel.
You do that by using laravel-mix, first of all you should download and install NodeJs
Then on your project directory you check on command line npm -V to see if you have successfully installed node.
Then you run npm run install then on your laravel project file dir you will have a file called webpack.mix open up that file and reference all your css and JS files that are stored on resources/assets/css or js.
After you set all the files on resources then on command line you run npm run dev and everything you change/add on ur resource/ js or css will be compiled to public directory. To see compile status, run the command npm run watch.
This way your Laravel project will have included all js and css files.
You are using URL::asset as it should be used
but you have forgotten to wrapped it in double-quote as href={{URL}} should be href="{{URL}}"
And you are including your files in assets folder but you have not specified that in your url, so just use as below:
<link href="{{ URL::asset('assets/css/a.css') }}" rel="stylesheet">
And if you think that for using URL::asset you have to make asset folder in public folder then you are misinformed, because by default public folder will be used as asset if not any ASSETS_URL specifed in .env file.
So there is no need to make assets folder but if you want to then you can, otherwise my public folder structure look alike below:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
And by the way you can also use just asset() as i used.
You can put the css and js file in the public folder.
then use your main file app.blade.php
if your file is in the css folder of public directory.
Embed asset file to blade template by using Html helper
open file composer.json add this
"require": {
"laravelcollective/html": "^5.2"
}
then run command composer update
Next you have to add provider located in config/app.php with this line
'providers' => [
// ...
Collective\Html\HtmlServiceProvider::class,
// ...
]
Add two class aliases to the aliases array of config/app.php:
'aliases' => [
// ...
'Form' => 'Collective\Html\FormFacade',
'Html' => 'Collective\Html\HtmlFacade',
// ...
],
In blade template you would use
{{ Html::script('yourfolder/jquery-2.2.3.min.js')}} for script and
{{Html::style('yourfolder/bootstrap.min.css')}} for style
In your root view file eg. > app.blade.php
Include with link tag eg: <link rel="stylesheet" href="{{ URL::asset('assets/css/your_file.css') }}">
Assets will link you to your public folder and you can include the file using your path to the file with the subfolders to your file.
Happy coding :)
I have a problem about laravel run without use php artisan serve command. I'm working in xampp/htdocs/works folder. I created a blog under htdocs/works folder and if i use php artisan not problem but i want to use without php artisan like localhost:8080/works/blog/ working but not find css and js files.
How can I solved it ?
The first place I would check is the resources/views/layouts/app.blade.php or any other views you are trying to access and make sure it use a relative path like:
<link href="/css/app.css" rel="stylesheet">
The root is /public for the path, so in this example, app.css should be in public/css/app.css
Hope this help.
you can use the helper asset
<link href="{{asset('css/app.css')}}" rel="stylesheet">
here the official doc https://laravel.com/docs/5.4/helpers#method-asset
The best soulution which works every time, is using Elixir
Read the documentation, you can insert your files like
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
<script src="{{ elixir('js/app.js') }}"></script>
I recomend starting with Webpack.
I am new to Laravel and am trying to get the css in the public directory to load. The page loads no problem but the CSS gives me a 404 error in firebug:
"NetworkError: 404 Not Found - http://127.0.0.1:8000/css/main.css"
I wrote this in the blade template:
<link href="{{ asset('/css/main.css') }}" rel="stylesheet">
Which outputs:
<link href="http://127.0.0.1:8000/css/main.css" rel="stylesheet">
Which seems correct.
The site is run with php artisan serve. Any suggestions? Thanks!
Try:
<link href="{{asset('css/main.css')}}" rel="stylesheet">
OR
<link href="{{url('css/main.css')}}" rel="stylesheet">
OR
If you are using php artisan serve its possible that your public folder is not being used, so use PHP native server instead and specify the public folder as the web root.
Stop artisan serve and try using PHP native server by issuing this command at the root of your Laravel project: php -S localhost:8000 -t public
If you install Illuminate/HTML
you can do
{!!HTML::style('css/styles.css')!!} //styles.css inside public/css folder
or try
{{ asset('css/styles.css') }}
When you specify a path for your css and JS files, the root of the files need to be in 'project-name\public\' and not 'project-name\'
If you want for example to include with blade 'mytheme.css' which is inside 'mypersonalcss' folder ('mypersonnalcss\mytheme.css') fist add it to the project in 'project-name\public\mypersonnalcss\mytheme.css'
Then add it in your blade file :
<link href="{{ asset('mypersonnalcss\mytheme.css') }}" rel="stylesheet" type="text/css" >
Please see : Laravel 5 not finding css files to learn more about how to add assets to blade files.
I am Using Laravel 5.0 , the Form and Html Helper are removed from this version , i dont know how to include external css and js files in my header file. Currently i am using this code.
<link rel="stylesheet" href="/css/bootstrap.min.css"> <!--- css file --->
<script type="text/javascript" src="/js/jquery.min.js"></script>
I think that the right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
Here I have a js directory in the laravel's app/public folder. There I have a jquery.js file. The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
Keep in mind that the old mehods:
{{ Form::script() }}
and
{{ Form::style() }}
are deprecated and will not work in Laravel 5!
Try it.
You can just pass the path to the style sheet .
{!! HTML::style('css/style.css') !!}
You can just pass the path to the javascript.
{!! HTML::script('js/script.js') !!}
Add the following lines in the require section of composer.json file and run composer update "illuminate/html": "5.*".
Register the service provider in config/app.php by adding the following value into the providers array:
'Illuminate\Html\HtmlServiceProvider'
Register facades by adding these two lines in the aliases array:
'Form'=> 'Illuminate\Html\FormFacade',
'HTML'=> 'Illuminate\Html\HtmlFacade'
In laravel 5.1,
<link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>
Where assets folder location is inside public folder
i use this way, don't forget to put your css file on public folder.
for example i put my bootstrap css on
"root/public/bootstrap/css/bootstrap.min.css"
to access from header:
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
hope this help
Place your assets in public directory and use the following
URL::to()
example
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
At first, you have to put your .css or .js files in the public folder of your project. You may create subfolders to it and move the files into the subfolder. Then you have to do the followings
<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>
In my example, I have created two subfolders called css and js. I put all of the .css and .js files in corresponding folders and use them where ever I want them. Thank you and hope this helps you.
There are many ways to include external css and js files as specified in below code but you can choose one of them, i have tested them all, they work the same.
<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />
Maybe there are more ways to load it.
but keep in mind that if you are loading the css and js from other than a public folder then better to use Laravel mix.
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
Laravel 5.5 comes with mix , the replacement for Elixir, the external css(sass) can be extracted to resources/assets/css(sass) and import to app.css(scss) or give the correct path to your node_module folder that contains the library and can be used as
<link rel="stylesheet" href="{{ mix('css/app.css') }}" >
The same can be done for Javascript too .
Ok so I was able to figure out for the version 5.2. You will first need to create assets folder in your public folder then put css folder and all css files into it then link it like this :
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
Hope that helps!
CORRECT & SECURED WAY
If you have a external .css or .js file to add into your page!
My version : Laravel Framework 5.7
If you want to add a External .js file..
Copy your External codes.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/js.
Open file app.js.
Scroll down to the bottom and paste your External JS.
Finally run command npm run dev in your terminal.
your scripts will be updated and its compiled and moved to public/js/app.js . by adding a .js file in public folder will not effect on your page.
If you want to add a External .css file..
Copy your External styles.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/sass.
Open file app.scss.
Scroll down to the bottom and paste your External Styles.
Finally run command npm run dev in your terminal.
your scripts will be updated and its compiled and moved to public/css/app.css . by adding a .css file in public folder will not effect on your page.
Easiest and the safest way to add your external .css and .js.
Laravel JavaScript & CSS Scaffolding
YouTube Compiling Assets
First you have to install the Illuminate Html helper class:
composer require "illuminate/html":"5.0.*"
Next you need to open /config/app.php and update as follows:
'providers' => [
...
Illuminate\Html\HtmlServiceProvider::class,
],
'aliases' => [
...
'Form' => Illuminate\Html\FormFacade::class,
'HTML' => Illuminate\Html\HtmlFacade::class,
],
To confirm it’s working use the following command:
php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"
To include external css in you files, use the following syntax:
{!! HTML::style('foo/bar.css') !!}
I may be late to the party but it's easy to include JS and CSS the Laravel Way by simply using asset() function
e.g.
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
Hope that helps
I have been making use of
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
for javascript and
<link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.
It mostly happens due to laravel webpackmix is not yet executed
composer require laravel/ui
PHP artisan ui vue --auth //you can use vue boostrap --auth is to add the login paths and
npm install
if it's asking to run "npm fund" then do it
npm run dev
try this once again
Sorry for opening another topic on this but after hours of researching I haven't found a solution:
As stated in symfony's documentation I want to include my assets (css, js, images) directly and without using Assetic. The documentation is recommending the following sniplet:
<script src="{{ asset('js/script.js') }}" type="text/javascript" />
Unfortunately this always ends in a 404 file not found error for every try. I have placed my assets in the myBundle/Resources/public folder and I also copyied it into the web folder using php app/console assets:install web without success.
What am I missing here? Is there a configuration missing? Thank you in advance.
asset('js/script.js') will produce a link like /js/script.js. The files will be copied to a bundles folder, not to the web root. You want something like this to generate the correct URL:
<script src="{{ asset('bundles/myBundle/js/script.js') }}" type="text/javascript"></script>
(Note also that script tags need to have a closing </script> to make them work cross-browser.)