This is where technology is annoying. 3 days ago I upgarded from Laravel 5.3 to Laravel 5.4. Despite of a bad upgrade guide offered by Laravel documentation, totally found out I have to migrate from Gulp to Webpack (which I was not familiar with).
It's 2 Days, I'm still searching about Webpack to know how I can do a job which was so simple before. There isn't any clear notes out there. Even I can't understand what is the best practices for a website with so much styles and scripts.
Sorry for nagging so much. I'm really confused.
Assume I have 15 CSS files in two parts. 5 of them are common files which are used in both user and admin panel and both panels have 5 specific files. The same structure for JS files.
Also want to use long-term cache, whilst avoid render-blocking JavaScript files (async/defer).
With Gulp I could easily merge all Styles and JavaScripts in 3 bundles. It was so simple to async them and also long-term caching was OK.
With Webpack If I use mix.js() long-term caching is OK but I can't load them asynchronous because Webpack has it's own bootstrapper.
If I use mix.scripts() or mix.combine(), I'm able to load scripts asynchronous, but now npm run watch won't watch for changes in those javascript files.
I prefer to use what Laravel is suggesting, but that's really annoying. Where can I find a simple example of a website implemented by Laravel 5.4 and Laravel Mix?
I have seen JeffreyWay's example but that's very basic and so much far from a real website.
Related
I'm a graphic designer who just started learning Laravel this week, recently I've been searching how to install the latest bootstrap version in my project correctly, which is all I need to be honest and I'm not too comfortable with other options like Tailwind.
As some tutorials and answers have suggested I ended up compiling and using a famous project named laravel/ui, sadly the resulting version comes with a few changes, that just doesn't look as good in my opinion (different fonts like Nonito, colors and margins)
So now I'm wondering...
Why is it not recommended to just add the CDN links in my master template?
Is it possible to update this compiled CSS somehow to make it look as the CDN?
Sorry if this questions might be opinion based, but I'm really out of places to ask, seems like the documentation for Laravel 8.x has removed everything related to Frontend, which are making thing even more confusing for me with all these options Laravel offers.
I am new to Laravel.
When I install Laravel 6 a lot of the things that install by default in Laravel 5.8 are not evident i.e. bootstrap, vue, jquery.
I see this is package.json file.
I did not find anything that explains this and wondering if anyone has some guidance that might enlighten me.
Example:
I was trying to use bootstrap as shown in the video I was watching and found missing resources/sass files ap.scss and .variables.scss. ap.scss was empty and .variables.scss was absent. I did find them buried elsewhere in the installation; however, bootstrap did not work and any attempts I made to install bootstrap and other missing pieces wound up breaking the framework (probably something I did.)
In the meantime I am staying with a Version 5 distribution of Laravel.
Laravel decoupled what front end tech you use by default in 6.0
You can review the documentation here.
https://laravel.com/docs/6.x/frontend
I didn't find any good boilerplate, as I want. I need boilerplate with:
React
Redux
Express
Routering
Server-side rendering
Thunk middleware
Hot reload
Css-modules
Webpack
Babel
Eslint
Dev and Prod mods
I didn't find anything in all github! Making it yourself is very very complicated - many errors, stupid things! I spent 2 monthes for this and didn't achieve the desired result.
I strongly recommend working through this: https://github.com/verekia/js-stack-from-scratch
Aside from the fact that it covers everything you asked for an more, this repository actually walks you through the setup of your own 'boilerplate' which is a far more valuable tool in the long run.
I have a simple boilerplate repo that I built up based on that repo here: https://github.com/savish/sample-js-app
I'm fairly new to Vue and only learn a little bit of it. Actually it's my first time seeing this beautiful library (whatever you may call it ) And i saw many developers actually pulling many dependencies from npm like vueify, and many more. Now, I just want to ask. I'm only a beginner. and what i know is to just pull of my files and store them in my resources/assets/js folder and just do elixir on them. And, is it really a good practice to just pull of those dependencies and browserify/webpack on them regardless the size of the app i'm developing ? Humbly asking for opinions
This problem is driving me mad, I have been researching and have read about the standalone and runtime version of Vue. As far as I can tell Laravel 5.4/homestead ships with the standalone version as default.
The Vue development tools in chrome show the example component so I think that part is working correctly, just cannot render the template.
I am relatively new to Vue and npm been stuck in the past with jQuery, firstly where in laravel can I check/set I want the stand alone version of Vue? If it is not that problem does any one have any ideas?
Thanks for help
VueJS supports two ways of building apps like you said.
Load all necessary scripts within your page via script tags (not combined .vue files).
Compile and bundle all your files with Gulp, Browserify, Webpack or other tools.
Can you explain what you did so far. I guess you don't compile everything down.
The comment by peaceman was the solution, I had multiple calls to elixir, I condensed down to one and it worked straight away. Thanks everyone for your help.