How can i manage frontend assets with laravel mix and git?

Question

I'm using Mix (this applies to Elixir as well i guess) to manage my frontend assets. I have Mix configured to version files in production but not in dev. As such, when i update assets, i get updated app.js and app.css files in dev and app.{hash}.js and app.{hash}.css files in production.

What is your advice on how to leverage this with version control?

1. Put the files in version control? If so how do i manage the constant changes during development? Keep adding new hashed files? Do i leave app.js and app.css on the production server?
2. .gitignore the js and css files and run npm on the production server to compile the assets locally?
3. Some other solution?

What are your thoughts on this?

Thanks in advance.

Answer 1

At my workplace we've .gitignore'd the css/js folders for almost a year for different projects with no issue just letting the server handle npm as part of it's build step.

And if you use yarn, it'll create a lock file which ensures you'll get the same exact js dependencies on production.

When using versioning just use the mix() helper on your script/css tags and it'll handle pointing to the correct file via the mix-manifest.json file in the public directory.

For example:

layout/app.blade.php has

<script src="{{ mix('js/app.js') }}"></script>

when you run npm mix creates the the public/mix-manifest.json file like so

{ "/js/app.js": "/js/app.{hash-example}.js" }

The only issue I've seen is with mix and using the mix() helper it appears to only work while npm watch is being run, which is something elixir handled fine before but mix is relatively new so it might get addressed, I myself haven't been annoyed enough to look into it since during development I always run npm run hot which does hot reloading on any js file changes. -- Edit: this appears to be fixed now