after npm run prod for production in laravel, do I need to upload mix.manifest.json along app.css and app.js to shared hot or not?
the mix.manifest.json file will change to :
{
"/js/app.js": "/js/app.js?id=b891664151c01b268197",
"/css/app.css": "/css/app.css?id=4b5a5b36ae9495db0146"
}
but no such files in public, uploading just app.css and app.js is enough?
and is my code correct for versioning in production and development?
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
if (mix.inProduction()) {
mix.version();
}
You will also have to copy mix.manifest.json to your public folder along with app.css and app.js. Mix.manifest.json is where Laravel looks to get the version number. You will also have to change how you grab your css and js files in your app.blade.php so it looks like this:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
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>
I am new to Laravel and Vue and trying to include a component in my blade template as below
Below is my app.js
require('./bootstrap');
window.Vue= require('vue');
Vue.component('Home',require('./components/home.vue').default);
webpack.min.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
Home.vue inside resources/js/components/home.vue
<template>
<div class="home">Hello from home</div>
</template>
in my blade template, I have loaded app.js and added component as below
<body class="antialiased">
<Home></Home>
</body>
now when I try to compile npm run dev or npm watch it gives me the following error
ERROR in ./resources/js/components/home.vue 1:0 Module parse failed:
Unexpected token (1:0) You may need an appropriate loader to handle
this file type, currently no loaders are configured to process this
file. See https://webpack.js.org/concepts#loaders
| Hello from home |
webpack compiled with 1 error
can someone please help me to fix the issue?
If you shown the complete home.vue file, the script part with the export is missing:
<template>
<div class="home">Hello from home</div>
</template>
<script>
export default {
name: "Home"
}
</script>
Or it may be also related to this line:
mix.js('resources/js/app.js', 'public/js')
You should try with:
mix.js('resources/js/app.js', 'public/js').vue()
While working with Vue, make sure that following dependencies have been properly installed:
VueJS (of course)
vue-loader (npm i vue-loader)
vue-template-compiler (npm i vue-template-compiler)
You can check those dependencies in your package.json file. If they are not there, then your SFC not going to work.
Export default is not a problem. There are compnents with just template and that's completely fine.
I have a Laravel application. Currently there's a single package.json file in the root of the project that has scripts to build the frontend app.js and app.css as well as backend.
Can I use two different ones that would be in frontend/package.json and backend/package.json so that front-end has only front end related packages and scripts while the backend has only backend related packages and scripts.
Thoughts?
In Laravel5, we have laravel-mix that can help you do that easily. In the root directory of your project, there is a file known as webpack.mix.js, and in it by default there are the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
If you want to have separate js and scss files, just add here. Say you want to add theme.js and theme.scss for the frontend, just include as follows:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/theme.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css');
Of course don't forget to add the corresponding files inside the resources/js (changed from laravel 5.5 onwards) and resources/sass respectively.
We made a little change on our Laravel project structuere. We made a file 'Larvel' inside the project. To make it work we changed the path in 'index.php' :
require __DIR__.'/laravel/vendor/autoload.php';
$app = require_once __DIR__.'/laravel/bootstrap/app.php';
So the Command php artisan serve isn't working. Due to this problem our vue component isn't updating.
We are running it on local server using xmapp
We want to keep the project structure as it is, and need a solution.
$npm run watch
$npm run watch --pull
$npm run dev
$npm run production
webpack.mix.js =>
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css');
Main view file where all js & css files are linked in ->
master.blade.php
<script src="{{ asset('/') }}js/app.js"></script>
We expect if any changes we make in our vue component after running npm run watch then the update will show on our browser.
public/js/app.js has moved in root folder
You can use version.
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css').version();
<script src="{{ mix('js/app.js') }}"></script>
I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js
Downloaded files by NPM
Code
my webpack.mix.js
const mix = require('laravel-mix');
//laravel default to make app.css and app.js
// I want add Datatables to these files
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
//my template files
mix.combine([
'public/theme/primary/js/jquery.min.js',
'public/theme/primary/js/popper.min.js',
'public/theme/primary/js/bootstrap.min.js',
'public/theme/primary/js/uza.bundle.js',
'public/theme/primary/js/default-assets/active.js'
], 'public/js/combined.js');
Any idea?
Solved
I added this code to my bootstrap.js under require('bootstrap');
require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );
and then added styles to my app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Everything works perfectly now.
Hope it help others.
To combine multiple scripts and styles you can do it this way:
mix.scripts([
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
'resources/js/app.js'
])
.styles([
'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
'resources/sass/app.scss'
]);
This by default should create all.js and all.css files in the respective js and css public folders.