Assetmanager in Mean.io not working in production mode

Question

I'm trying to utilize Mean.io for an app I'm making, and I haven't changed basically anything from the original config files and when I launch this app to heroku in production mode, it isn't aggregating the dist files correctly and gives me

"Failed to load resource: the server responded with a status of 404 (Not Found) http://****.herokuapp.com/bower_components/build/css/dist.min.css""

Same applies to the JS file. The related files look as such: Assets.json: {

"core": {
    "css": {
        "bower_components/build/css/dist.min.css": [
          "bower_components/met_theme/global/css/components.css"
        ]
    },
    "js": {
        "bower_components/build/js/dist.min.js": [

            "bower_components/angular/angular.js",
            "bower_components/angular-mocks/angular-mocks.js",
            "bower_components/angular-cookies/angular-cookies.js",
            "bower_components/angular-resource/angular-resource.js",
            "bower_components/angular-ui-router/release/angular-ui-router.js",
            "bower_components/angular-bootstrap/ui-bootstrap.js",
            "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
            "bower_components/met_theme/global/scripts/datatable.js",
            "bower_components/met_theme/global/scripts/metronic.js"
        ]
    }
}
}

Within my gruntfile:

    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    assets: grunt.file.readJSON('config/assets.json'),
    // later on
            uglify: {
        core: {
            options: {
                mangle: false
            },
            files: '<%= assets.core.js %>'
        }
    },
    csslint: {
        options: {
            csslintrc: '.csslintrc'
        },
        src: paths.css
    },
    cssmin: {
        core: {
            files: '<%= assets.core.css %>'
        }
    },

I can see this is a production vs development error as if I change the assetmanager object in my express.js file to:

var assets = assetmanager.process({
    assets: require('./assets.json'),
    debug: process.env.NODE_ENV !== 'development',
    webroot: /public\/|packages\//g
});

As opposed to !== 'production' it gives me the same issue locally. I'm not very familiar with this way of loading files and I can't seem to find any solutions so anyone who can offer an answer or point me in the right direction would be much appreciated.

You set NODE_ENV in heroku? `heroku config:set NODE_ENV=production` — Andy Gaskell, Jul 23 '14 at 04:51
Yeah, like I said, it's something going on with the way assetmanager builds the dist files. — Russell Ingram, Jul 23 '14 at 05:29
@EnriqueAparicio Unfortunately, I never found a solution to this problem. I wound up moving on from the project for other reasons before being able to solve it. If you find a solution, please post it here, as I imagine I will encounter it again someday. — Russell Ingram, Dec 04 '14 at 17:47

score 1 · Answer 1 · answered Dec 27 '14 at 10:38

We are in the final stages of launching a product, and it was imperative for us to actually do some aggregations.

Turns out it wasn't easy at all.

The simplest way to do is this is NODE_ENV=production forever start server.js

But that just didn't work for us and spat out errors on console.

Our assets.json looks something like this

"bower_components/jquery/dist/jquery.min.js",
"bower_components/socket.io-client/socket.io.js",
"bower_components/fullcalendar/fullcalendar.min.js",
"bower_components/tinymce/tinymce.min.js",
"bower_components/select2/select2.min.js",
"bower_components/angular/angular.js",        
"bower_components/angular-ui-calendar/src/calendar.js",
"bower_components/checklist-model/checklist-model.js",
"bower_components/angular-ui-tinymce/src/tinymce.js",
"bower_components/angular-elastic/elastic.js",
"bower_components/angular-ui-select2/src/select2.js",
"bower_components/angular-ui-utils/ui-utils.min.js",
"bower_components/angular-ui-router/release/angular-ui-router.min.js",
"bower_components/angular-bootstrap/ui-bootstrap.min.js",
"bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js",
"bower_components/ng-file-upload/angular-file-upload.min.js",

The set of steps that the gruntfile has for production are clean, uglify and then cssmin.

I prefer the script mode like this

#!/bin/sh
grunt clean
grunt concat
grunt uglify
grunt cssmin
NODE_ENV=envname forever --uid "appname" -a start server.js

Anyways, neither approach really worked for us. I think uglification completed f**ked up when it came to loading things in the right order, and we ended up with a bunch of console errors.

What we had to do was rewrite our assets.json to break it into jquery dependencies and angular dependencies, and then load jquery dependencies followed by angular dependencies. Maybe there were some conflicting libraries that we are using, that caused the problem.

There are still further problems with aggregation even if the above worked for you. For example => tinymce will tell you that it is now looking at bower_components/dist/js for a plugin folder, theme folder, and a skin folder.

So then we had to change this to

#!/bin/sh
grunt clean
grunt concat
grunt uglify
grunt cssmin
cp -r bower_components/tinymce/plugins bower_components/build/js/
cp -r bower_components/tinymce/skins bower_components/build/js/
cp -r bower_components/tinymce/themes bower_components/build/js/
NODE_ENV=envname forever --uid "appname" -a start server.js

Clearly not a pretty script, but that's what worked for us. NODE_ENV=production, definitely didn't do the trick on its own.

Assetmanager in Mean.io not working in production mode

1 Answers1