How do I add a third party js file to specific blade views?
Basically I want to add gridstack functionality in a dashboard page inside my new project.
I already tried downloading the js and css files from gridstack, I then placed the gridstack.js in the project's resources/assets/js/ folder, and the css files inside the project's resources/assets/css/ folder
The next step would be to load the files in the mixer. For that I thought that I could just go to /resources/assets/js/app.js and add the library
require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");
then I ran npm run dev, which gave the following errors
ERROR Failed to compile with 20 errors
These dependencies were not found:
jquery-ui/data in ./resources/assets/js/gridstack.js
jquery-ui/disable-selection in ./resources/assets/js/gridstack.js
omitted 18 similar lines
To install them, you can run: npm install --save jquery-ui/data
jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form
jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7
jquery-ui/plugin jquery-ui/safe-blur jquery-ui/scroll-parent
jquery-ui/tabbable jquery-ui/unique-id jquery-ui/version
jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse
jquery-ui/widgets/draggable jquery-ui/widgets/droppable
jquery-ui/widgets/resizable
Of course I tried to run npm install --save jquery-ui/data to see if it works and it does not:
npm ERR! Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
How can I add a simple js and css to my project without all these compilation errors...?
I also tried another approach: removed the requires from the above approach, and went for the webpack.mix.js file and made it look like this:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
.js('resources/assets/js/jquery-ui.min.js', 'public/js')
.js('resources/assets/js/gridstack.js', 'public/js')
....
I then ran the npm run dev only to get the same error from above.
What is wrong here?
I tried to remove the jquery-ui refference and run the npm again... the exact same error
Also, I installed gridstack using npm in my project... but I have no idea how to directly use it. I should be able to use it, since it is "installed", but how?
I also did a npm cache clean, no effect
I also verified my versions of node and npm, they seem ok:
node v6.10.3
npm v3.10.10
EDIT
After removing the ./ from the require, and after removing the jquery-ui altogether (it was already loaded) I managed to get no more errors from the npm command.
However the gridstack functionality is just not there. I compared my sources with an official demo of gridstack and saw that they include 2 js files of gridstack:
<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>
But Laravel mix does not agree with me adding the extra require. I get errors again from npm if in /resources/assets/js/app.js I put the following
require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js
What can I do to get the gridstack full functionality inside my Laravel 5.4 project?
EDIT
What seemed to work is:
remove all changes done previously like the one in app.js
I copied webpack.config.js from node_modules/laravel-mix into my project's root folder
I added the bellow code
module.exports.resolve = {
extensions,
alias: {
'vue$': 'vue/dist/vue.common.js',
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
}
};
In webpack.mix.js, I added the following:
mix.js('resources/assets/js/app.js', 'public/js')
.copy('node_modules/gridstack/dist/gridstack.all.js','public/js');
in package.json I added:
"devDependencies": {
...
"gridstack": "^0.3.0"
}
in the command line I did
sudo npm rebuild node-sass
then
sudo npm run dev
After I the above, npm compiles correctly the mix, bun now, I get a jQuery error in the frontend:
jQuery.Deferred exception: c.draggable is not a function
d.prototype.draggable#http://myproject.com/js/gridstack.all.js:16:1395
This points to the second part of the gridstack.all.js (right at the beginning of it, where jquery is defined... again)
Error seems to indicate that jquery is loaded more than once. But that is not a problem in a classic PHP app.
Any idea how to make this work?
The default laravel application requires by default Bootstrap, lodash and jquery, and when I add gridstack to the project, looks like somewhere there is a second require for jquery. I just don't get it.
Can anyone try to simulate what I am doing and tell me how they did
it?
you need to include gridstack via asset() then everything will be happy - for this example the files are in /public/js/dashboard
eg (the hootsuite grid demo page)
<!DOCTYPE html>
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/dashboard/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>
</head>
<body>
<div class="header">
-
+
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
Related
Could you tell me how to link css and js file in laravel according to my file structure
I wanna link app.css and app.js into museum.blade.php (inside portfolio)
I have try something like this: <link rel="stylesheet" href="{{ asset('resources/css/app.css')}}">, but it did not work
here is my file structure
please help me, thank you so much
I have try something like this: , but it did not work
This happens because resources folder are not to be consumed "public", the folder that would be consumed by "public" is a public folder, you need to compile them from resource to public first. Laravel has great documentation about it at Laravel Mix
To fix your problem, you need to find a file on your project directory called "webpack.mix.js"
and put this mix code on it.
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/museum.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
and then you can run npm run dev at your command line to compile the assets.
it will compile your targeted resources on webpack mix to public.
After that, on the head of your museum.blade.php, you can call it like
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
Did is what I did so far
npm i flatpickr --save
Add #import "~flatpickr/dist/flatpickr.css"; to the app.scss
index.blade.php
#section('content')
<div class="form-group">
<label for="loaned">Loaned</label>
<input type="date" class="form-control" name="loaned" id="loaned">
</div>
#endsection
#section('scripts')
<script>
flatpickr('#loaned')
</script>
#endsection
I get an error, "flatpickr is not defined". I read the documentation but it, I don't know what to do with this part:
// commonjs
const flatpickr = require("flatpickr");
// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";
You can add do this in one of two ways:
In your app.js (usually under the resources folder):
import flatpckr from 'flatpickr';
window.flatpckr = flatpckr;
This will expose the flatpckr function in your global window object.
An alternative is to add all your script code in your script files instead of in the blade files e.g.:
import flatpckr from 'flatpickr';
// Maybe add conditions on when to run this
flatpckr('#loaned');
This way you don't "pollute" your window object with a bunch of libraries without needing to.
In this case I add the following line to webpack.mix.js
mix.copy('node_modules/flatpickr/dist/flatpickr.css', 'public/css/flatpickr.css');
and import the css file the regular way.
<link rel="stylesheet" href="/css/flatpickr.css" />
Addition: of course you need to run npm run dev and if you use versioning, add the file to your git.
This works for me:
npm i flatpickr --save
Register flatpickr in the resources/js/app.js
require('./bootstrap');
require('alpinejs');
require("flatpickr");
Add an import flatpickr in the resources/css/app.css
#import 'flatpickr/dist/flatpickr.css';
Run the npm run dev or npm run watch.
I have this folder structure and I want to access the files inside resources. So im doing
<link href="{{ asset('sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
but it says not found so i thought i need to add resources so i tried
<link href="{{ asset('resources/sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('resources/js/app.js') }}" type="text/javascript"></script>
Still i am getting status 404 for both files.
UPDATE:
I run this command:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
tl;dr: You need to either run npm run dev, npm run watch or npm run prod to compile your assets to "usable" js/css files.
You should never link to assets in your resources folder, they will not be available. Anything inside the public folder can be linked to.
On your local/dev environment run npm run dev to compile your assets to the public folder (see webpack.mix.js in your project's root folder to know exactly what happens). If you happen to make a lot of changes you can run npm run watch instead so you don't have to type npm run dev after every change - your assets will automatically be compiled if changes are detected.
Using the vanilla webpack.mix.js npm run dev will compile resources/assets/js/app.js to the public/js folder and resources/assets/sass/app.scss to the public/css folder, leaving you with public/js/app.js and public/css/app.css - those are the files you should link to in your .blade file:
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
You can read more on the "Compiling Assets (Mix)" documentation link:
https://laravel.com/docs/7.x/mix
I am developing a Web Application. I am using Laravel 5.3. I also want to use SASS. This is my first time of using SASS. I learned from this tutorial- http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass. Now I am trying to integrate SASS with Laravel. I just started building project. So I decided to use this one - https://github.com/panique/laravel-sass.
I included this in composer.json
"require-dev": {
"panique/laravel-sass": "1.0"
}
I added this line in public/index.php
SassCompiler::run("scss/", "css/");
So my index.php in public folder look like this
Then I run "update composer" command in terminal. Installation worked well in terminal.
So now I need to try on SASS and make sure it is working or not.
So I created two file in public folder.
public/css/style.css
and
public/scss/style.scss
Then I created a view, hello.blade.php. This is the html.
<!DOCTYPE html>
<html>
<head>
<title>SASS</title>
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">
</head>
<body>
<h1 class="heading">Let's sass. Just change color.</h1>
</body>
</html>
Then I added this lines in public/scss/style.scss
$red: #FF4848
.heading
color:$red
Then I configure Laravel route like this.
Route::get('hello', function () {
return View('hello');
});
When I access the URL from browser, it is giving me this error.
Fatal error: Uncaught Exception: parse error: failed at $color : red
line: 1 in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php:4108
Stack trace: #0
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(2761):
scss_parser->throwParseError() #1
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(121):
scss_parser->parse('$color : red\r\n\r...') #2
C:\xampp\htdocs\whatsuppathein\vendor\panique\laravel-sass\sass-compiler.php(53):
scssc->compile('$color : red\r\n\r...') #3
C:\xampp\htdocs\whatsuppathein\public\index.php(50):
SassCompiler::run('scss/', 'css/') #4 {main} thrown in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php on
line 4108
What is wrong with my code?
When I replace this line
SassCompiler::run("scss/", "css/");
with this
SassCompiler::run("public/scss/", "public/css/");
in public/index.php, it is not throwing error. But not changing any CSS. Not changing the font color.
Laravel uses gulp to transpile dependencies and it comes built it when you do npm install from your project direcftory.
Open up your resources/scss/app.scss file and you can perform #import statments to your own files.
The gulp.js file in your project's root directory contains the sass transpiling.
I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!