Ajmal Afif ajmalafif

A not politically correct assertion of my feelings towards a piece of software:

Note: Repetition builds cynicism, asset_sync isn't bad, but when an asset problem cannot be solved via support it gets escalated to me. Often times someone using asset_sync the problem is due to their use of the library and not from Heroku.

Backstory

The asset sync gem uploads your assets (images, css, javascript) to S3. From there you can either point browsers to the copy on S3 or use a CDN + the S3 bucket. It's a good idea, and solved a problem at one time.

It is no longer needed and you should now use https://devcenter.heroku.com/articles/using-amazon-cloudfront-cdn instead. So rather than copying your assets over to S3 after they are precompiled the CDN grabs them from your website instead. Here's some reasons why it's better.

The browser field is provided by a module author as a hint to javascript bundlers or component tools when preparing modules for client side use.

terms

Below are common terms used in the rest of the document

server

This is a non-dom based javascript execution environment. It usually only contains the base javascript language spec libraries and objects along with modules to communicate with OS features (available through commonjs require).

client

Fixing npm On Mac OS X for Homebrew Users

If you just want to fix the issue quickly, scroll down to the "solution" section below.

Explanation of the issue

If you're a Homebrew user and you installed node via Homebrew, there is a major philosophical issue with the way Homebrew and NPM work together. If you install node with Homebrew and then try to do npm update npm -g, you may see an error like this:

$ npm update npm -g

	<script>
	console.log("--- HARP Debugger --");
	console.log(<%- JSON.stringify(inspect) %>);

	// Just check your console in chrome to see and inspect the variable.
	</script>

	'use strict';

	var fs = require('fs');
	var path = require('path');
	var express = require('express');
	var psi = require('psi');
	var app = express();
	var port = process.env.PORT \|\| 7777;

	app.get('/', home);

	{% comment %}

	A customized sidebar for this theme. If advanced tagging is enabled in
	theme settings, prepend your tags with "group" names (E.g. BRAND_) and your
	collection page will create groups of tags to sort by.

	Expansion of https://gist.github.com/darryn/8047749

	{% endcomment %}

	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifycss = require('gulp-minify-css'),
	jshint = require('gulp-jshint'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	clean = require('gulp-clean'),
	concat = require('gulp-concat'),
	notify = require('gulp-notify'),

	var source = require('vinyl-source-stream');
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var browserify = require('browserify');
	var reactify = require('reactify');
	var watchify = require('watchify');
	var notify = require("gulp-notify");

	var scriptsDir = './scripts';
	var buildDir = './build';