Broccoli.js is good at building assets. But now that they're built, how does one use them on a webpage?
Broccoli has a great feature of having assets cached at every step in a list of transforms. This makes it quite fast. It can selectively reprocess only the subset of assets that have changed, and it can selectively transform only what's required.
Broccoli provides a command, serve that watches for changes to the trees specified in your Brocfile.js and spits them out to its temporary directory. From there, it sets up a small webserver to serve the built assets to anyone who wants them. The intent is that you can use this server in local dev on your sites.
And you'll get a local server defaulting on port 4200.
Now that you have this server for local assets, you need to reference it from your webpage. Just as when you get to production, you'll want to reference a deployed asset on a CDN, locally broccoli can serve as your asset host.
If you're in development, you'll want to use http://localhost:4200 for asset host, otherwise you'll want to use something like http://mycdn.com.
Currently, the plugin only supports development and production values.
If you have a server-side component in your project that serves UI, you likely have this built in already with the likes of erb, jade, swig, or something else. If you don't, again you can defer to Broccoli. It's good at building assets after all.
Here, assetsHost is a variable that will be replaced at compile time with the appropriate asset host value.
Now when the jade template is compiled, it will have as local data the value of assetHost according to the env set by BROCCOLI_ENV.
And since Broccoli is handling the building of your view, you can even use Broccoli to serve it. If it's called index.jade and ends up at the root directory after building with Broccoli, you could serve your whole site at http://localhost:4200.
And just like that, you can dev locally referencing the assets that Broccoli is building for you. Does it work for you? Is the picture clear?