Express-mincer-spa NPM

express-mincer-spa

easy generator of frontend application with express backend and mincer supported asset pipeline.

installation

$ npm install --global express-mincer-spa

usage

Generate new application

$ ems new my-spa-application

Start application

$ ems start my-spa-application

// or

$ node my-spa-application

// or

$ cd my-spa-application
$ node index.js

Precompile assets

$ ems precompile

Main File

var expressMincerSpa = require('..');
var app = module.exports = expressMincerSpa(__dirname, {
    precompile: {
        files: [
            // DEFINE HERE FILES U WANNA PRECOMPILE
            'app.css',
            'app.js'
        ]
    }
});

if(!module.parent) {
    app.start();
}

Default Options

see here in lib

var defaultOpts = {
    port: process.env.PORT || 3000,
    ip: process.env.IP || '',
    
    host: function() {
      return exports.host(this.ip, this.port);
    },
    
    engine: 'jade',
    views: path.resolve(root, 'views'),
    public: path.resolve(root, 'public'),
    favicon: path.resolve(root, 'public', 'favicon.ico'),
    
    useSpaRoute: true,
    middlewareForStaticPublic: [],
    configureAssetPipeline: function(assetPipeline)  {},
    configureExpressBeforeMiddlewares: function(app)  {},
    configureExpress: function(app)  {},
  
    notFoundHandler: function (req, res, next) {
        var error = new Error('Not Found');
        error.status = 404;
        next(error);
    },
    errorHandler: function(err, req, res, next) {
        res.status(err.status || 500);
        var resp = {
            message: err.message
        };
        if(req.app.get('env') !== 'production') {
            resp.error = err;
            resp.stack = err.stack.split('\n');
        }
        res.render('error.jade', resp);
    },
  
  assets: {
      mincer: Mincer,
      root: root,
      production: env === 'production',
      mountPoint: '/assets',
      manifestFile: path.resolve(root, 'public', 'assets', 'manifest.json'),
      paths: [],
      scanDirectories: [
          'assets'
      ],
  },
  
  precompile: {
      target: path.resolve(root, 'public', 'assets'),
      images: true,
      fonts: true,
      views: false,
      viewFiles: [
        'index'
      ],
      viewsTarget: path.resolve(root, 'public'),
      updateAppBeforePrecompileViews: function(app) {},
      files: [],
      options: {}
  },
  
  livereload: {
      active: env === 'development',
      ip: process.env.LIVERELOAD_IP || 'localhost',
      port: process.env.LIVERELOAD_PORT || 35729,
      script: function () {
          return util.format('//%s:%s/livereload.js', this.ip, this.port);
      },
      host: function() {
          return exports.host(this.ip, this.port);
      },
      watch: [],
      debug: env === 'development',
      exts: [
          'js',
          'coffee',
          'json',
          'html',
          'jade',
          'ejs',
          'css',
          'styl',
          'less',
          'png',
          'gif',
          'jpg',
          'svg',
          'ico',
          'eof',
          'ttf',
          'woff',
          'woff2'
      ]
  }
};

Mincer

Connect Mincer

Github Repo

example font fix

e.g. Font-Awesome

//= require font-awesome/css/font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url(asset_path('font-awesome/fonts/fontawesome-webfont.eot')+'?v=4.4.0');
  src: url(asset_path('font-awesome/fonts/fontawesome-webfont.eot')+'?#iefix&v=4.4.0') format('embedded-opentype'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.woff2')+'?v=4.4.0') format('woff2'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.woff')+'?v=4.4.0') format('woff'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.ttf')+'?v=4.4.0') format('truetype'), 
       url(asset_path('font-awesome/fonts/fontawesome-webfont.svg')+'?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body
  padding-top: 60px