Its always nice to use Laravel elixir feature. But I have some basic question. Firstly
when we run gulp command, it concatenates all the css and js files. But I think I dont need, for example, datatables.css and datatables.js/boostrap-wysihtml for all of my pages. how to tackle this situation?
Secondly Lets review this code:
elixir(function(mix) {
mix.styles([
"bootstrap.min.css",
"owl.carousel.css",
"animate.css",
"style.css",
"datepicker.css"
]);
mix.scripts([
"jquery.min.js",
"bootstrap.min.js",
"bootstrap-datepicker.js",
"typed.min.js",
"wow.min.js",
"owl.carousel.min.js",
"home.js",
"side-navigation.js",
"script.js"
]);
mix.version(["css/all.css","js/all.js"]);
});
in blade:
<link rel="stylesheet" href="{{ url(elixir('css/all.css')) }}">
what is the use of this elixir() function, when we are creating all.js and all.css file that has everything concatenated inside it?
You want to use the elixir function in the blade template because it will automatically use the rev.manifest file to resolve which versioned file(s) to use. The docs have more info. As far as not needing all scripts on all pages, there are a few different ways to pull it off. You can create a task that generates just generates one bundle - perhaps scripts needed everywhere - and another bundle handling the rest. I'd advise you to research that to see what works best for you.
Related
I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.
I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0).
I am using the following simple mix configuration:
mix.js("resources/js/app.js", "public/js/app.js")
.vue()
.version()
.extract();
Everything works fine when running npm run watch, and when I launch the production build, I get as expected three files in my public folder (manifest.js, app.js and vendor.js). I included these three files in my app.blade.php file in the following way:
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
The mix-manifest.json that comes out looks like this:
{
"/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
"/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
"/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}
Most of the routes are working just fine with such a configuration.
However, the problem I am facing is a generic 404 error that shows up when trying to access particular routes having at least two levels, such as <my_website>/read/<post_id>. In this case, the browser tries to resolve something like <my_website>/read/js/app/1.js which obviously doesn't exist, as it should search for <my_website>/js/app/1.js instead.
Am I missing something obvious here? Is there any way to include a full path in the manifest file to avoid this, and making sure that the browser resolves the correct files? Or any other work around to make this work? Thank you!
You can force a base URL in the browser. This rewrites the URLs for you.
Use the <base> tag
See documentation of the base tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Example:
<base href="https://www.example.com/">
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
A minor question. I was trying to learn routing using Vue.JS in laravel, so I went to this website and I see :
<script src="{{ mix('js/app.js') }}"></script>
And this differs from what I know on including app.js into my website like this:
<script src="{{ asset('js/app.js') }}"></script>
My question is:
Is there any difference on using one of them?
When to use mix or asset?
Does using asset affect routing in Vue.JS?
I tried using either of them, but as I said, I'm new to routing using laravel & Vue.JS so I don't know where I did wrong. I can't get it to work.
I've also tried googling, but what they show isn't related to my question,
.
.
PS: Additional Notes.
In my "website" I already implemented Authentication. Could be a factor or not that cause my routing to fail. If so, how to handle this?
The mix() function will bring you the versioned file of that asset(with a unique id) While the asset function will not take into affect changes made to that asset while running npm run dev or npm run watch The mix function is for cache busting.
TL;DR: What is the correct way to link to a stylesheet in Laravel 5?
Background:
I'm using the dev version of Laravel 4.3 (5) because I want to use Socialite, and it makes sense to develop with that from the start. I am having a problem getting templates transferred from 4.2
I've moved my blade layout files to the new directory structure (resources/templates) and placed my CSS in the public/css/ folder.
When I load my route /test/ all I get is "Whoops, looks like something went wrong."
For testing purposes I've removed all blade layout syntax from my layouts - the raw HTML works, but there is no styling (as there is no linked stylesheet). That tells me the routes, views and controllers work.
The problem:
In my layouts, if I remove the following, the layouts work:
{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::style('css/style.css') }}
Question:
What is the correct location and syntax for Blade Stylesheet inclusion in Laravel 5 and what I should be using instead?
The HtmlBuilder has been removed from Laravel's core, so HTML::style() is no longer available.
If you want to use it in laravel 5, add the following to your composer.json file, under the require key:
"laravelcollective/html": "~5.0"
Also note, since HTML::style() returns HTML code, you don't want it escaped. Use the raw brackets:
{!! HTML::style('css/style.css') !!}
Adding to #joseph's answer, for the users preferring not to switch to the new syntax, you can use
Blade::setRawTags('{{', '}}');
and continue with the old syntax . this can be set almost anywhere, but a better choice would be a service provider, say legacy service provide for l4 . you can find further discussion on this at laracasts, where you can find taylor otwells thoughts on this .
If you want to use plain HTML then use like this-
<link rel="stylesheet" href="/css/folder/style.css">