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
Related
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.
sorry in advance my english is bad
I have a problem when I will use laravel jetstream for my project. Because when i used stack livewire, the display doesn't match, here I give the output result
enter image description here
And also I've run npm install & npm run dev so it will run development using mix as default
Here I will give the project folder structure
enter image description here
maybe what I can conclude is to change the development process from mix to vite, or there are hints from the experts here on how to solve the problem?.
Thank you in advance
Actually you can fix this issue by replacing the #vite with these one in views/layouts/app and guest blade.
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
because you install previous version of laravel, #vite was added in 9.+ laravel so i think its just bc you using 8. (any <9) version, just install previous jetstream version for example composer require laravel/jetstream:2.7.0
go to resources\views\layouts\guest.blade.php and resources\views\layouts\app.blade.php and replace below code, if its not there, just insert below code in these two files.
and also remember to comment out #vite line, see below screenshot.
see screenshot
I hope it will solve the problem.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
this can help you to solve #vite :
php artisan view:clear
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>
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
This is my gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'style.less'
], 'public/css/style.css')
.styles([
'reset.css',
'font-awesome.min.css',
'style.css'
], 'public/css/app.css', 'public/css')
.scripts(['jquery-1.12.0.min.js', 'main.js'], 'public/js/app.js', 'resources/assets/scripts')
.version(['css/app.css', 'js/app.js']);
});
As result I get files
public/build/app-2a14246111.css
public/build/app-7790e07dfb.js
public/build/rev-manifest.json
but when I try to add css and js files to layout
<link rel="stylesheet" href="{{ elixir("css/app.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>
I get
<link rel="stylesheet" href="/build/css/app-2a14246111.css">
<script src="/build/js/app-7790e07dfb.js"></script>
and browser can't find them because it tries to find
http://localhost:8080/build/css/app-2a14246111.css
http://localhost:8080/build/js/app-7790e07dfb.js
and project folder name and public folder are missed somehow in paths. How to fix it?
Actually I see, I can add dot in paths like
<link rel="stylesheet" href=".{{ elixir("css/app.css") }}">
<script src=".{{ elixir("js/app.js") }}"></script>
and then all will work, but I don't like this kind of fix.
That's because you're running the Laravel project on localhost. When you deploy the project to a server, the problem resolves itself (assuming it's configured correctly).
If you're using Apache, you can add a Virtual Host configuration so that instead of http://localhost:8080/laravel/public you can use something like http://domain-name.app:
<VirtualHost *:80>
DocumentRoot "C:\Users\username\path\to\laravel\public"
ServerName domain-name.app
</VirtualHost>
And then in your hosts file add:
127.0.0.1 domain-name.app
This way, you can link to absolute paths in your HTML like /css/somefile.css instead of ./css/somefile.css.
Checkout Homestead, from Laravel, it helps to avoid a lot of pain in the ass.
FWIW... you can also wrap the elixir tags with URL::asset like this:
<link href="{{ URL::asset(elixir('css/app.css')) }}" rel="stylesheet">
That solved my issue and still allowed me to run on port 8888.