I am writing this post just to solve a small problem that I’ve recently experienced while deploying a Sails App in production server. All the CSS and JS files are working very well except the Font Awesome Icons. At the beginning I was not understanding why it’s not working in production server when it was working very well in the development environment.

After a while I’ve figured out the problem. OKAY!!! Before jumping on explaining of the solution, let me talk a little bit about Sails Assets Management. Sails framework has a nice assets folder. All static contents are served from this assets folder. The structure for CSS, Image and JS files in the assets folder is as below:

--/assets
--/assets/js
--/assets/js/dependencies    
--/assets/style
--/assets/images

When you run the server “Sails Lift”, it takes all static files inside assets/ directory and put into a hidden directory .tmp/public/. It also minifies CSS and JS files as well as loads all JS files priroty basis inside dependencies directory.

One more thing to mention that I always put third party CSS and JS libraries into a subdirectory: vendor inside theassets directory to make front-end more clean and structured. In my project all the libraries of Twitter bootstrap and Font Awesome I put into the vednor subdirectory…..

--/assets/vedor/css
--/assets/vedor/js
--/assets/vedor/images
--/assets/vedor/fonts

Btw, for introducing this extra one level directory structure, I had to modify the pipeline.js as follow,

var cssFilesToInject = [
  'styles/**/*.css',
 
  //Third Party CSS files
  'vendor/**/*.css'
];
 
var jsFilesToInject = [
 
  // Load sails.io before everything else
  'js/dependencies/sails.io.js',
 
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',
 
  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js',
 
  //Third Party JS
  'vendor/**/*.js'
];

Actually, I forced sails framework to load all static contents inside the vendor directory.Now all CSS and JS file ara available in template with minified version. But only problem occurred to .ttf, .svf, .eot, .otf and .woff files inside /assets/vendor/fonts directory (these file are part of Font Awesome fonts). These are not copied properly in the hidden directory. Font Awesome’s CSS required these icons and fonts. For what in production envrionment none of icons and fonts is working. If you go through Sails documentation, you will able to get that assets are manage by Grunt tasks located at /tasks/config/copy.js . Thus, I just added another Grunt tasks that copies all static contents from the vendor directory to .tmp/public/ directory. DONE.

I added following snippets as an instruction to tasks/config/copy.js

 fonts: {
      files: [
        {
          expand: true,
          flatten: true,
          src: ['.tmp/public/vendor/fonts/*'],
          dest: '.tmp/public/fonts'
        }]
    },

so my copy.js is looked like as below:

module.exports = function(grunt) {
 
	grunt.config.set('copy', {
		dev: {
			files: [{
				expand: true,
				cwd: './assets',
				src: ['**/*.!(coffee|less)'],
				dest: '.tmp/public'
			}]
		},
		build: {
			files: [{
				expand: true,
				cwd: '.tmp/public',
				src: ['**/*'],
				dest: 'www'
			}]
		},
    fonts: {
      files: [
        {
          expand: true,
          flatten: true,
          src: ['.tmp/public/vendor/fonts/*'],
          dest: '.tmp/public/fonts'
        }]
    },
	});
 
	grunt.loadNpmTasks('grunt-contrib-copy');
};

After that I registered this task: copy:build to grunt tasks at build.js and buildProd.js files located at ..

–/tasks/register/build.js

module.exports = function (grunt) {
    grunt.registerTask('buildProd', [
        'compileAssets',
        'concat',
        'uglify',
        'cssmin',
        'copy:fonts',
        'linkAssetsBuildProd',
        'clean:build',
        'copy:build'
    ]);
};

And,

–/tasks/register/buildProd.js

module.exports = function (grunt) {
    grunt.registerTask('prod', [
        'compileAssets',
        'concat',
        'uglify',
        'cssmin',
        'copy:fonts',
        'sails-linker:prodJs',
        'sails-linker:prodStyles',
        'sails-linker:devTpl',
        'sails-linker:prodJsJade',
        'sails-linker:prodStylesJade',
        'sails-linker:devTplJade'
    ]);
};

Then, I was getting all Font Awesome Icons in my application. In the same way, you can add any third party static contents in any directory in the assets folder. 🙂