I am using php laravel, and I have a login page that works fine but the js files and css files are failing to load.
this is the links I created:
<script src="../Backend/vendor/metisMenu/metisMenu.min.js"></script>
from the view, I need to go there times back to go to the backend folder and two times to stay inside of it.
the error in the console looks like this:
GET http://127.0.0.1:8000/Backend/vendor/bootstrap/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
Are these files located in the /public folder? Because that is the only folder available to the web.
If not, you should probably move the files there.
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 public folder. There I have a jquery.js file. The function URL::asset() produces the necessary url for you.
Related
I was given a Laravel project and I manage to download it's configuration and get it started on php artisan serve.
When I open it on localhost:8000 It opens but only the html portion of it.
It seems like css files didn't load for it.
Is there some sort of package we need to install with composer in my environment.
To get the css working.
The public folder looks like this in the laravel project.
backend favicon.ico front images index.html index.php js robots.txt sql vendor
web.config
Laravel provides a helper function, asset(), which generates a URL for your assets. You can use this in blade syntax.
Put your css, js files on public folder. for example of a css file, put it on :
../public/bootstrap/css/bootstrap.min.css
In your blade you can access this file from header like this :
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
hope this help
I am working on a laravel project I received and I find many of the blade files which are in my resources/views directory have the following
#section('spa-script')
<script src="{{ asset('js/compiled/app.js') }}"></script>
#endsection
I want to work on the layouts but I dont know where the source code is for these files?
This depends on the version of Laravel and the compiler you use. For me, the source files (pre-compilation) are located in /resources/assets/js/. Alternatively, the final assets could refer to /public/js/compiled folder.
Generally the assets() methods give the path of your /resources/assets directory. So any path in this function passed as parameter will added after that. In your case asset('js/compiled/app.js') will generate path as /resources/assets/js/compiled/app.js.
I've finished my laravel project and played it in a subfolder on my domain.
https://example.com/swap
So the above is the root of my directory and when I go there, I do get the index. But now every link I press, I'm redirected to the root of my domain. So I'm getting:
https://example.com/events/1
Instead of https://example.com/swap/events/1
Am I forced to change all URLs by hand in my files are is there a way my htaccess can always redirect to this 'swap' folder and place everything behind that?
I've tried using groups in my routes, without success.
Use url for all your links which are inside views folder:
For subfolder link use:
Sub-Folder Link
For root folder links use this syntax:
Index
There might arise issues with stylesheet and javascript in 'swap" sub-folder links with a 404 error. To fix that, use:
<script type="text/javascript" src="{{asset('js/app.js')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/app.css')}}">
You need to direct your VHOST to laravel's public folder. This is done for security purposes. Ideally your laravel install is outside the public folder, thus you would have yourdomain.com contain your laravel install and rename your public folder to swap.
IF you really want the name swap in your routes you could use route prefix with groups.
Open .env File and Change Your App Url to https://example.com/swap/ and use routes as links of whole application
All Url's Will Work fine.
When putting a laravel application in a subfolder. You need to modify your .htaccess for subfolder hosting. And add the following:
RewriteBase /swap
This way, the app knows when you go to route {{ url('/hello-world') }}, it will ultimately go to "/swap/hello-world"
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
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.)