I configured AdminLTE with laravel 6. I am getting error 404 in console. I used NPM to install adminLTE, my adminlte files are in node_modules folder. Kindly look at the link if I am doing it right.
File structure I have
|-> node_modules
|-> resources
|-> views
|-> admin
|-> users
|->index.blade.php
A link from index.blade.php
<script src="../../node_modules/admin-lte/plugins/jquery/jquery.min.js"></script>
Why are you doing like this? Your jquery and other necessary plugins are already included in app.js file. Just run npm run dev. And then include the public js/app.js to your index.blade.php file.
If you need extra plugins just include them in bootstrap.js file.
Note:If your app.js is empty just run composer require laravel/ui.It will create app.js and bootstrap.js with necessary configraton.
Related
I am building Laravel package locally and my package has views therefore I am using css and scripts. I decided to use vite but I am kind of stack because vite is looking for manifest.json in main Laravel public folder instead of inside the vendor and my package folder.
This is the error I am getting,
Vite manifest not found at: /Users/User/Sites/laravel-project/public/build/manifest.json
The way I am registering style and script in my package is like below
#vite(['resources/css/app.css', 'resources/js/app.js'])
For some reason you need to pass the second parameter (which is the default):
#vite(['resources/css/critical.css'], config('vite.configs.default.build_path'))
I was trying to register a vue component in the app.js file from a laravel project but I just can't seem to find the right path for the app.js, there are two files with app.js filenames. Here is my file structure:
public
css
js
app.js
resources
js
components
Articles.vue
ExampleComponent.Vue
app.js
bootstrap.js
Here is where I imported my app.js file to my blade file:
<body>
<div id="app">
<articles>
</articles>
</div>
<script type="text/javascript" src="{{ assets('js/app.js') }}"></script>
</body>
The problem is I want to access the second app.js file which is in the resources folder, but the above code keeps giving me the first app.js file which is in the public folder.
I tried giving it the absolute path to the file using this code URL::asset('resources/js/app.js')
This gives me a url like localhost:8000/resources/js/app.js which is the correct file location but somehow this link leads to a 404 page. So is there any other way to access the file?
Thanks
Firstly
localhost:8000/something always refer to something in the public directory. So, you cannot reference your resource/js/app.js in your blade file as js file.
Secondly
Actually you don't need to use the resource/js/app.js file in your blade. If you even do so, the code won't work. Because the codes in resources/js/app.js are un-compiled. You need to compile them and use them in blade files. So, where is the compiled file? It's actually the public/js/app.js file. This file is the compiled version of your resource/js/app.js.
The problem is every time you change a js file inside resource, you need to re-compile the js codes. All those codes will be merged together and will be copied in public/js/app.js.
How to compile?
Before compiling your js code you need to make sure you have installed your frontend dependencies correctly by running the npm install command.
Then if all dependencies are installed you can compile your code using the command
npm run dev for development level compile
npm run production for production level(minified and secured) compile.
If you don't want to run the npm run dev command every time you change a file, then you can run npm run watch command. This command will watch if any js file changed. If changed it will compile automatically.
How do I combine all of my js files to a single file with laravel mix? and is it a good practice to directly keep the downloaded external plugins js files and CSS files in public directory? because we have a js folder already in resource folder and it's getting compiled and saved in public directory when we do npm run production, not sure if this is correct or not.
This is how my resource folder looks like :
And my app.js file looks like this :
You can include those libraries by installing them to NPM with npm install jquery for instance. Then in your bootstrap.js file you would have something like:
window.jQuery = window.$ = require('jquery');
That would make it available in the window, and then you still have just one js file to include on the client (your compiled app.js file).
If you do have a file you want separate from your main bundle, and it isn't one you have pulled in through NPM, it's not a bad thing to commit it straight to the public folder. I would keep them in /resources/assets/js/vendor and then use mix.copy to move them into /public/js/vendor. Thats just because I prefer all of my work to be in resources and to have public be all compiled or copied files.
you can add them from npm , or if these are external plugins like my case you can do this
mix.js('resources/assets/js/app.js', 'public/js')
.scripts([
"path/plugin1.js",
"path/plugin2.js",
.......
], 'public/js/all.js').styles([
"path/plugin1.css",
"path/plugin2.css",
.....
],'public/css/all.css');
for more useful information you can visit : https://laravel.com/docs/5.6/mix
You can use npm to install jquery and do it like this same with jeff
window.$ = require('jquery');
OR but if you have your own script want to include then
just put it top on vue instance
require('./jquery.js') //based on your picture it jquery and app.js are in same level
window.vue = require('Vue')
this will automatically read and being compiled by the npm.
Only recently jumped on to the Laravel and Bootstrap 4 bandwagons, alas I have got Laravel 5.5 running with Bootstrap 4.0 no problem.
Sooo, I have getbootstrap.com Dashboard theme but I'm unclear on how to compile the themes assets and dependancies, i.e. what do I do with the gulpfile.js and package.json?
Note: I am using Laravel 5.5.34 and Bootstrap 4.0.0. I would rather learn how to compile assets using Laravel Mix and migrate from Gulp to Webpack, than simply copy the dist CSS to the public directory or link to the CDN in blade templates.
I was going through the same dilemma and this answer from Jeffrey Way has helped me.
I have created a css folder in resources/assets folder ( now it looks like resources/assets/css ). I copied all the css files that came with the theme to this folder.
And i updated the webpack.mix.js file in the root of the application
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now when i run npm run dev all the css is compiled into a single file in pubilc/css/app.css and js in public/js/app.js
Note: My theme also came with a js file which is named app.min.js
So i inluded it in public/js/app.min.js as the main compiled file name is app.js. If your theme has a file app.js rename it to theme.js and place in the public/js folder.
You can call these the normal way you do after compiling them with {{asset('css/app.css') }}
I am wondering in how I should include my npm packages into my HTML. I have added "slidebars": "2.0.2" to my package.json. After that, I ran npm install. So far so good.
Now, I am new with both Laravel and npm. I am trying to use the "mix" feature provided in Laravel like this:
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
Does that automatically compile all the packages provided in the package.json into the single app.js + app.css? Or do I manually need to import the CSS + JS from the slidebars-plugin, like: <link href="/node_modules/slidebars/dist/slidebars.css" rel="stylesheet">?
For the css, the easiest way would to copy your css files to resources/assets/ and then link it to your app.scss like this:
#import "package.scss"
As for the JS, you can combine your vendor JS files into one and copy them to the public directory like this
mix.js([
'node_modules/package/dist/package.min.js',
'node_modules/package2/dist/package2.min.js',
'node_modules/package3/dist/package3.min.js',
], 'public/js/vendors.js');
Then in your view, you just include /js/vendors.js