I'm trying to use Bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design on the Laravelhttp://laravel-boilerplate.com-boilerplate
Bootstrap-material-design has a npm install, but according to Bootstrap-material-design it's "just" a matter of adding the necessary links to your element for fonts and stylsheets, but Laravel can't find. I've tried this moving manually the .css and .js files:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/bootstrap-material-design.css') }}">
In publicfolder I have /css and /js but I always get a 404 error.
Laravel-boilerplate use this config for webpack-mix.js:
const { mix } = require('laravel-mix');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
.sass('resources/assets/sass/backend/app.scss', 'public/css/backend.css')
.js([
'resources/assets/js/frontend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/frontend.js')
.js([
'resources/assets/js/backend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/backend.js')
.webpackConfig({
plugins: [
new WebpackRTLPlugin('/css/[name].rtl.css')
]
});
Related
So in standard blade templates, you can translate any text by encapsulating them
{{__("Hello")}}
and it will translate to the applicable locale.
You can also do this in any included Javascript in the file...
#section('footer-scripts')
#parent
<script type="text/javascript">
swal.fire({
"title": "{{__('Alert')}}",
"text": "{{__('The application has been successfully submitted!')}}",
"type": "success",
"confirmButtonClass": "btn btn-secondary"
});
<script>
But what if you have a global js file thats included via webpack, call it custom.js and within it, it too has wording that needs to be translated?
const {mix} = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.copy('node_modules/tinymce/skins', 'public/js/skins');
mix.styles([
'node_modules/apexcharts/dist/apexcharts.css', //ApexCharts
'resources/assets/plugins/global/plugins.bundle.css',
'resources/assets/plugins/global/fonts/line-awesome/css/line-awesome.css',
'resources/assets/plugins/custom/datatables/datatables.bundle.css',
'resources/assets/css/pages/wizard/wizard-1.css',
'resources/assets/css/style.bundle.css',
'resources/assets/css/skins/header/base/light.css',
'resources/assets/css/skins/header/menu/light.css',
'resources/assets/css/skins/brand/dark.css',
'resources/assets/css/skins/aside/dark.css',
'resources/custom.css'
], 'public/css/libs.css');
mix.scripts([
//Global - All Pages
'resources/assets/plugins/global/plugins.bundle.js',
'resources/assets/js/scripts.bundle.js',
// Page Vendors
'resources/assets/plugins/custom/datatables/datatables.bundle.js',
'resources/assets/plugins/custom/datatables/plugin-intl.js',
'resources/assets/plugins/custom/datatables/accent-neutralise.js', // DataTables Accent neutralise
// Custom Vendors
'node_modules/apexcharts/dist/apexcharts.min.js', //ApexCharts
'node_modules/jspdf/dist/jspdf.debug.js',
'node_modules/html2canvas/dist/html2canvas.js',
// Custom
'resources/custom.js'
], 'public/js/libs.js');
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I'm trying to build a PWA with offline support using Laravel and Vue.js. I'm using the laravel-mix-workbox plugin to setup my service worker, but I'm having a massive amount of trouble trying to accomplish what should be a simple task. I have some static assets (images, XML files etc.) that are served out of my application, and I can't get workbox to add them to the precached file list.
I have tried moving the assets to /resources/img and adding a call to copyDirectory to try to get them included, also, I have tried the webpack-copy-plugin, but only the compiled assets are included(js, css, fonts etc). Here is my webpack.mix.js file:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version()
// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});
Does anyone know how I can include all files in my /resources/img (or /public/img) in the precached files list?
Ok, so it looks like this is an issue with laravel-mix-workbox. Removing it and using the generic workbox webpack plugin solves the problem. For anyone finding this, here is the updated webpack.mix.js:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
new InjectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
}),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version();
All in all, using workbox with laravel-mix has been an extremely painful process with all of the 'minor' tweaks that laravel-mix does breaking the workbox plugin. I'd recommend sticking to plain webpack if possible.
So after my previous problem got solved, I'm now facing a different one. I'm using Browsersync to watch for file changes, and it works perfectly, but instead of injecting css changes, it realods the whole page whenever my css file is changed.
Here is my gulpfile:
var elixir = require('laravel-elixir');
var gulp = require('gulp');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('comingsoon/soon.scss', 'public/assets/comingsoon/css/soon.css')
.scripts('comingsoon/soon.js', 'public/assets/comingsoon/js/soon.js')
.browserSync({
files: [
'app/*.*',
'app/**/*.*',
'public/assets/**/*.*'
],
open: 'external',
proxy: 'gate7.dev:81',
host: 'gate7.dev',
port: 80,
notify: false
});
});
Figured it out. I had to be specific about the files' extensions.
var elixir = require('laravel-elixir');
var gulp = require('gulp');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('comingsoon/soon.scss', 'public/assets/comingsoon/css/soon.css')
.scripts('comingsoon/soon.js', 'public/assets/comingsoon/js/soon.js')
.browserSync({
files: [
'app/*.*',
'app/**/*.*',
'public/assets/**/*.css',
'public/assets/**/*.js'
],
open: 'external',
proxy: 'gate7.dev:81',
host: 'gate7.dev',
port: 80,
notify: false
});
});
I have installed https://github.com/puikinsh/gentelella on my application, is there a way to link the assets to laravel elixir?
here is my template directory
Root
|-app/
|-node_module/
| |-gentelella/ # -> this is my template
|-gulpfile.js
|-public/
// other laravel folders to follow.
Inside ./gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Try this:
elixir(function(mix) {
mix.sass('app.scss');
mix.styles([
'node_modules/path/to/gentelella/css.css'
], 'public/css/app.css', './');
mix.version('public/css/app.css');
});