I really like the simplicity that Mix brings, but I was wondering if I can use it outside of a Laravel project entirely that is a separate frontend hosted on S3? It seems that it is tightly coupled to the Laravel framework?
Also, a separate question. I see that vue-cli can help me achieve what I want, so why would I use Mix? I understand that it has batteries in form of BrowserSync, version hashes etc, but what else should I keep in mind?
Yes, you can use Mix outside of Laravel; it is an NPM package after all. The docs show how to use it in a stand-alone project.
Mix is a wrapper around Webpack which provides a number of CSS and JS preprocessors for bundling modules and compiling assets
The only thing the docs don't mention (for using as standalone) is creating the mix() function, which is used for setting the actual versions of assets for cache busting in the html. Here's another article showing, in more detail, how to set it up and also create the mix() function.
https://www.sitepoint.com/use-laravel-mix-non-laravel-projects/
Hopefully others will chime in, but I haven't used vue-cli so have no opinion.
@Cronix Thanks for that SitePoint link by the way.
But I still don't see how I can use mix() outside of Laravel.
The example in the article is tightly coupled to Laravel.
I don't think the standalone Mix lets us version at all?
In that case, how would I version. Any ideas?
The example in the article is tightly coupled to Laravel.
The example in the article has nothing at all to do with laravel. I'm not sure what you're referring to, other than it says "laravel mix" which is the actual name of the mix package. It shows how to use it in a generic project using sass compilers.
I don't think the standalone Mix lets us version at all?
The article also has it's own "mix" php function, which can be used on any project. It's generic and doesn't use any laravel functions. You need that function to output the asset versions in your html (like it will turn http://yoursite.com/css/app.css into http://yoursite.com/css/app.css?34lk5j5l3kh45 using the hashed versioning scheme)
Like you'd do
<link href="<?php echo mix('css/app.css'); ?>" rel="stylesheet">
using the php mix() function that they include in the article
@Cronix I am not looking to use PHP whatsoever because my app's frontend will live entirely on S3/Cloudfront. In that case, how would I go about versioning?
I think the only way would be to hardcode the versioning. Laravel mix, when using version() in the mix file, creates a file called mix-manifest.json, which looks something like this:
{
"/js/app.js": "/js/app.js?id=0a761df35372545b9884",
"/css/app.css": "/css/app.css?id=50fdf4b6fbed784ca6de"
}
It's a straight map from the original asset name to the versioned name. You'd just have to manually copy the versioned name into your html (which is what the mix() php function does automatically).
So instead of the traditional
<link href="/css/app.css" rel="stylesheet">
you'd have to look at the mix-manifest.json file and manually use the hashed version for that file, like
<link href="/css/app.css?id=0a761df35372545b9884" rel="stylesheet">
And then you'd have to manually update your html every time you change app.css to use the new hash after you run npm run dev. It kind defeats the automatic versioning system of Laravel Mix if you're not using php on your production server.
This youtube video really helped me and it work great
Please or to participate in this conversation.