npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aspax-express

v0.7.7

Published

Module enabling Express.js to handle assets built and packaged by ASPAX.

Downloads

17

Readme

What's this?

NPM version Dependency Status License Downloads

A module that enables Express.js to serve assets built and packaged by ASPAX.

Installation

Run this in your application folder:

npm install aspax-express --save

Usage

Quick steps:

  1. Create a folder structure similar to this one for your project:

     /assets        -> asset sources
     /server        -> main Express.js application folder
     /server/public -> public static folder

    Notice: put all your asset sources in /assets; don't put anything in /server/public, as it will be overwritten.

  2. Create /assets/aspax.yml describing your assets configuration:

     js/app.js|fp|min:
       - lib/bootstrap/js/bootstrap.js
       - lib/moment.js
       - lib/jade/runtime.js
       - scripts/namespaces.coffee|bare
       - templates/now.jade
       - scripts/index.ls|bare
    
     css/app.css|fp|min:
       - lib/bootstrap/css/bootstrap.css
       - lib/bootstrap/css/bootstrap-theme.css
       - styles/index.styl|nib
    
     favicon.png: images/favicon.png
    
     ...
  3. Install ASPAX globally if you haven’t already, install aspax-express in your application, and also make sure to install any necessary source handling plugins:

     # Global ASPAX
     npm install aspax -g
    
     cd server
    
     # ASPAX-Express
     npm install aspax-express --save
    
     # Source handling plugins
     npm install aspax-coffee-handler --save-dev
     npm install aspax-ls-handler --save-dev
     npm install aspax-jade-handler --save-dev
     npm install aspax-styl-handler --save-dev
  4. Add require('aspax-express')(app, path.join(__dirname, 'aspax.json')) before handling views in your main application script (usually /server/app.js):

     var express = require('express')
       , app = express();
    
     ...
     require('aspax-express')(app, path.join(__dirname, 'aspax.json'));
     app.use app.router;
     app.get('/:page', function(req, res) {
     ...
     });
  5. Wrap the URLs in your views into asset() function calls:

     //- link(rel="shortcut icon", href="/favicon.png")
     link(rel="shortcut icon", href=asset('favicon.png'))
  6. Then, in your /server folder you can run:

     # watch and build on-the-fly during development
     aspax -s ../client watch
    
     # build for development
     aspax -s ../client build
    
     # pack for production (will compile, concat, minify and fingerprint)
     aspax -s ../client pack
    
     # clean everything
     aspax -s ../client clean
  7. Run your application in development or production mode:

     # development
     #
     NODE_ENV=development node start.js
     # ...or
     NODE_ENV=development nodemon -e js,json,coffee -x node
    
     # production
     #
     NODE_ENV=production node start.js

    Notice: if you're using nodemon in development mode, add aspax.json to .nodemonignore to avoid restarting the application whenever an asset is rebuilt.

Have a look at this demo repository to see it in action.

What does it actually do?

In plain English, on application startup it reads the map produced by aspax pack and registers an app.locals.asset() method you'll have to use in your views to translate all the asset URLs.

Have a look at the main file here for details.

Endorsing the author