Skip to content

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

License

Notifications You must be signed in to change notification settings

naxmefy/express-mincer-spa

Repository files navigation

express-mincer-spa

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

npm version Dependency Status

Build Status Coverage Status

NPM

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

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

contributing

  • Found a bug? Create an issue!
  • Missing Feature? Create an issue or fork the repo, implement the feature and start an pull request.

license

MIT

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published