Deploy to Forge Elixir Versioning not updated on CSS / JS

Hi,

I'm running into a problem getting my CSS and JS files to show after I deploy using Forge. I've determined that the versioning numbers are not being updated on the server.

I'm not a server admin by any means so if I'm doing something wrong let me know.

I deployed my site files to digital ocean and when I viewed the site the CSS and JS files were reporting 404 errors. Locally everything runs great so I wasn't sure what was the issue. I accessed my Digital Ocean console and navigated to the files. I was able to confirm that the versioning number on the files was different from the ones locally.

To be safe I ran gulp to update the file contatenation, versioning etc. Everything went smoothly. I then updated my Bitbucket repo and deployed the files using Forge.

However even after doing that the file versioning did not change. I'm referencing the files in my blade template using elixir this way: {{ elixir('css/app.css') }}

So I'm not able to confirm which has (version) is being used for the files. Any ideas what the problem could be?

lindstrom

9 years ago

Level 15

Are your public files under version control? If not, you need to run gulp as part of your deployment on Forge. Add gulp --production to your deploy script.

TheMonk

9 years ago

Level 2

Thanks for taking the time to reply!

My public files are under version control. Just to be safe I added gulp-- production to my deploy script and did a deployment. No change.

The strange thing is when I view my Bitbucket repo the css file is listed as the following: app-c26d7ba685.css

But when I view the site I get a 404 on the css file and the site is looking for the following file: app-c9a8264287.css

I'm going to update the css file tonight to see if I can't force it to update itself.

lindstrom

9 years ago

Level 15

Take your public files out of version control. Elixir looks to /public/build/rev-manifest.json to determine which css/js file to include. The version you have in source will differ from one you build on the fly when you run gulp in production. Alternatively, you just need to run gulp in dev then ensure you are committing everything to source afterwards. Personally, I don't like that extra step so I just run gulp in production to build all my public assets.

The idea is to keep everything needed to build public files in resources/assets. If you use bower or npm, what you can do is copy those files to an appropriate place within resources/assets. I do the copy from bower/npm on dev only.

All that said, here's a rough sketch:

var isProduction = elixir.config.production; // at top of gulpfile

elixir(function(mix) {
    if (!isProduction) {
        mix.copy('bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss', 'resources/assets/sass/vendor/awesome-bootstrap-checkbox');
        mix.copy('bower_components/bootstrap-sass/assets/stylesheets', 'resources/assets/sass/vendor/bootstrap-sass');
        mix.copy('bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'resources/assets/js/vendor/bootstrap');
    }

// do your other tasks like sass, styles, scripts. version then copy any image assets
mix.copy('resources/assets/images', 'public/images');

});

I do have a note to copy images after versioning. I'm sure it's legit, but I can't remember why at the moment. :-)

Please or to participate in this conversation.