i just have a complete clear blade template file which manually add the app.js file in local server machine . the error i faced is GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404 (Not Found)
here is the code i used <script src="{{ asset('js/app.js') }}" defer></script> to blade file
whats wrong ?
could someone help me please ?
you have to configure your webpack.mix.js or vite.config.js then do npm run. After that public/js files will be created.
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>
After I successfully installed composer, npm and Tailwind in shared hosting, I am encountering this problem.
The page is being displayed but without css and js showing the error:
GET http://mydomain.preview-domain.com/css/app.css net::ERR_ABORTED 404 (Not Found)
GET http://mydomain.preview-domain.com/js/app.js net::ERR_ABORTED 404 (Not Found)
but in my app.blade.php I'm importing:
<head>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...
</head>
<body>
...
<script src="{{ asset('js/app.js') }}" defer></script>
...
</body>
It seems like the path to the public folder is wrong.
I would appreciate any help. I know that using Laravel in Shared Hosting is not a very good idea.
[NOTE]: I created a symbolic link from the website's public folder to the index.php of Laravel. This is how index.php runs.
This is the line I load my assets:
<script src="{{ asset('assets') }}/js/vendors/jquery-3.2.1.min.js"></script>
And here code from web.php for route settings:
Route::resource('masuk', 'Backend\ParkirInController');
It works fine with this code, but when I using a prefix like here:
Route::group(['prefix'=>'parkir'], function (){
Route::resource('masuk', 'Backend\ParkirInController');
});
The assets are not loaded and show an error like
require.min.js:5 GET http://localhost:8000/parkir/assets/js/vendors/jquery-3.2.1.min.js net::ERR_ABORTED 404 (Not Found)
So the name of prefix parkir is included to the assets URL.
Try changing this line:
<script src="{{ asset('assets') }}/js/vendors/jquery-3.2.1.min.js"></script>
to
<script src="{{ asset('/assets/js/vendors/jquery-3.2.1.min.js') }}"></script>
Here, you have just added a / before the assets so that the url starts from root instead of relative current path.
Finally I can solve it! This is because the dashboard.js from template is using require.js to set the required assets with a static path.
It look like this
Static path of assets
After I added / at the beginning of line like what #Imran said. It works fine
I use laravel 5.6, vue.js, apache.
Erro:
GET https://alphi.com.br/js/app.js net::ERR_ABORTED 404
Did you upload the file in your server? yes
Does the build provide a minified version with a hash added? no
The app.js is not recognized in my frontend application.
What I tried and did not work:
folder permission is correct
mix did not advance anything
I changed the folder, but error persist.
Configuration webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
Can anybody help me. I searched all over the internet and found nothing to help me.
Thank you
I found the solution for this thread
instead of using this
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
try this
<script src="{{ asset( mix('js/app.js')) }}" type="text/javascript"></script>
-add the asset function
I hope it helps
If you use .version() in Laravel-Mix, you should use in your blade
<script src="{{ mix('js/app.js') }}"></script>
..because it's has a versioned name instead. Same for stylesheet path:
{{ mix ('css/app.css') }}
Docs: https://laravel.com/docs/5.8/mix#versioning-and-cache-busting
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>